<div>
<InfiniteScroll
dataLength={load.length}
hasMore={load.length < datas.length+1}
loader={null}
endMessage={null}
onScroll={(e) => {
/* 屏幕发生滚动的执行方法。也可以采用官网的 next + scrollableTarget */
/* 当load的长度和datas的长度相等即加载完成 */
}}
>
<List
grid={{
gutter: 16,
column: 1, /* 每行展示的个数 */
}}
dataSource={datas}
renderItem={(item) => (
<List.Item>
{item}
</List.Item>
)}
/>
</InfiniteScroll>
</div>
| 参数 | 类型 | 含义 |
|---|---|---|
| dataLength | number | 当前已加载的数据列表长度 |
| next | function | 滚动加载请求数据的方法 (可结合scrollableTarget) |
| hasMore | boolean | 是否有更多的数据加载 (false时next不会粗发) |
| loader | node | 加载时可以设置一个加载器组件来显示 |
| endMessage | node | 所有数据加载完之后底部可以设置一个组件来提示加载完成 |
| scrollableTarget | node or string | 使用这个组件的DOM节点的id (并且已提供滚动条) |
| scrollThreshold | number | string | 默认值是80%，在接近底部的20%触发滚动条 |
| onScroll | function | 添加滚动事件 |
参考文章：https://blog.csdn.net/HYHhmbb/article/details/126461756