react+ant-mobile上拉加载效果

react H5 上拉加载更多

组件库：ant-mobile
组件：无限滚动组件+空状态

代码如下，把滚动和空状态封装到了一起，下次要用可以直接调用
封装

import React, { memo } from "react";
import { InfiniteScroll, Empty } from "antd-mobile";
export default memo(({ loadMore, hasMore, List, renderItem }) => {//父传子
  return (
    <>
      {(List || []).map((item, index) => {
       {/**renderItem就是要渲染的内容，可以写成任何需要的样式*/}
        return renderItem ? renderItem(item, index) : "";
      })}
      {/**无限滚动 */}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      {/**空状态 */}
      {List.length <= 0 && (
        <Empty
          style={{ padding: "90% 0" }}
          imageStyle={{ width: 128 }}
          description="暂无数据"
        />
      )}
    </>
  );
});

调用

import ScrollList from "../components/scrollList";//引入匿名暴露的组件，名字可以随便取
import { sleep } from "antd-mobile/es/utils/sleep";//这个应该是加载时间
export default memo(() => {
  const [List, setList] = useState([]);//列表数据源
  const [currentPage, setcurrentPage] = useState(1);//当前页
  const [pageSize, setPageSize] = useState(10);//每页条数
  const [hasMore, setHasMore] = useState(true);//初始状态为true，用户滚动到底部时会自动调用loadMore函数，相当于滚动一次，请求一次数据，控制loadMore是否调用的标识
  
  const loadMore = async () => {
    const {state,list, pagination} = await ListGet({currentPage,pageSize})//在loadMore中请求数据
    if (state === 200) {
      const append = list ?? [];
      setDataList((val) => [...val, ...append]);//因为是上拉加载，所以需要在前一次的列表上合并下一次请求到的列表
      setCurrent((currentPage) => currentPage+ 1);//下次请求时页数＋1
      if (currentPage=== pagination.totalPage) {
        setHasMore(false);//当前页数和返回数据的总页数相同是，不在有更多内容，不在继续调用loadMore函数
      }
      await sleep(2000);
    }
  };
  const renderItem = (item, index) => {//渲染的内容
    return (
      <div  key={index}>
        <div>
          <div>{item.xxx}</div>
          <div>{item.xxx}</div>
        </div>
      </div>
    );
  }; 
  return (
    <>
      <div className={styles.listWrap}>
        <ScrollList
          loadMore={loadMore}//加载更多回调函数
          hasMore={hasMore}//是否还有更多内容
          List={List}//列表数据源
          renderItem={renderItem}//要渲染的内容，就是list经过map后的item
        />
      </div>
    </>
  );
});