示例查看 http://qinwang.battlebanpick.com/infinite

安装

yarn add @nuonuonuonuoyan/react-infinite-scroll或npm i @nuonuonuonuoyan/react-infinite-scroll

import InfiniteScroll from '@nuonuonuonuoyan/react-infinite-scroll'

API

| 属性 | 说明 | 类型 | 默认值 | | ------------------------------------------------------------------------------ | --------------------------------------------------------- | --------------------------- | --------------- | | scrollWrapperClass | 列表容器的样式类 | string | - | | dataSource | 列表数据 | array | [] | | renderListItem | 渲染每一行的数据 | (item,index) => ReactNode | - | | service | 发起请求的接口 | () => Promise | - | | defaultParams | 发起自动请求时的默认参数 | object | {} | | onLoad | 首次加载的回调 | (res) => void | - | | mountLoadElement | 自定义首次加载提示内容 | ReactNode | - | | mountLoadClass | 首次加载的样式类（配合 mountLoadText 使用） | string | - | | mountLoadText | 首次加载的提示文案 | string | 首次加载... | | manual | 是否默认请求一次接口，如果设置为 true，则不会默认请求接口 | boolean | false | | canFirstLoad | 是否可以进行首次加载,需要配合 manual=true 使用 | boolean | false | | onSuccess | 加载成功的回调 | (res) => void | - | | onError | 加载失败的回调 | (res) => void | - | | onFinally | 不论成功失败都最终执行的回调 | (res) => void | - | | onLoadMore | 加载更多的回调 | async () => void | - | | loadMoreParams | 加载更多时上送给接口的参数 | object | {} | | requestParams | 是否默认请求一次接口，如果设置为 true，则不会默认请求接口 | boolean | false | | canFirstLoad | 是否可以进行首次加载,需要配合 manual=true 使用 | boolean | false | | loadMoreText | 加载更多时的文案展示 | string \| ReactNode | 正在全力加载... | | loadMoreElement | 自定义加载更多 | ReactNode | - | | loadMoreClass | 加载更多的样式类（配合 loadMoreText 使用） | string | - | | hasMore | 是否还有更多内容 | boolean | true | | noMoreElement | 自定义无更多内容 | ReactNode | - | | noMoreText | 无更多内容的文案 | (res) => void | 没有更多数据了 | | noMoreClass | 无更多内容的样式类（配合 noMoreText 使用） | string | - | | threshold | 触发加载事件的滚动触底距离阈值 | number | 50 | | isEmpty | 是否为空列表 | boolean | false | | emptyText | 空列表展示的文案 | string | - | | emptyTextClass | 空列表的样式类（配合 emptyText 使用） | string | - | | emptyElement | 自定义空列表 | ReactNode | - |

requestParams

更多参数请移步 useRequest W