antdMobile InfiniteScroll无限滚动

官网：antdMobile官网

用户想看到新的数据时，可以上滑页面自动加载数据。

当 hasMore 属性为 true 时，用户页面滚动到底部 threshold (默认为 250px)时无限滚动组件会调用定义的 loadMore 函数。

 // 解决useState 异步 接口多调一次的问题
  const listRef = useRef(ensureList)
  listRef.current = list

  const getList = async ({
    
     no }) => {
    
    
    try {
    
    
      const res: any = await getProductList({
    
    
        page: no,
        pageSize: 10,
        name: searchName,
      });
      if (res.code === 200) {
    
    
        const append = res.data || [];
        if (append.length > 0) {
    
    
          setList((val) => [...val, ...append]);
          setPage(no);
          //listRef解决异步问题
          const totalLength = listRef.current.length;
          setHasMore(totalLength < res.total);
          return;
        }
        setHasMore(false);
      }
      setHasMore(false);
    } catch {
    
    
      setHasMore(false);
    }
  };
  const changeTab = async (key: string) => {
    
    
    setList([]);
    setPage(0);
    setHasMore(true);
  };
  const searchProductList = (value: string) => {
    
    
    setList([]);
    setPage(0);
    setHasMore(true);
  };

  const handleLoadMore = async () => {
    
    
    await getList({
    
     no: page + 1 });
  };

<div>
       {
    
    /* 列表 */}
      <ProductList list={
    
    list}></ProductList>
      <InfiniteScroll loadMore={
    
    handleLoadMore} hasMore={
    
    hasMore} threshold={
    
    0}></InfiniteScroll>
</div>