Ant Design + List + 滚动加载列表

复制<div>
  <InfiniteScroll
    dataLength={load.length}
    hasMore={load.length < datas.length+1}
    loader={null}
    endMessage={null}
    onScroll={(e) => {
      /* 屏幕发生滚动的执行方法。也可以采用官网的 next + scrollableTarget 或者 loadMore 也可 */
      /* 当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