data-collect-miniapp/src/pages/mine/components/List.jsx

import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import VirtualList from '@tarojs/components/virtual-list';
import { Cell, Loading } from '@antmjs/vantui';
import useRequest from '@/utils/useRequest';
import { getBoundList } from '@/services/bind';
import Item from './Item';

const Row = (props) => {
  const { data, index } = props;
  const item = data[index];
  const onClick = () => Taro.navigateTo({ url: `/pages/index/index?id=${item.serialNo}` });

  return (
    <Item data={item} onClick={onClick} />
  );
}

export default (props) => {

  const [pageInfo, setPageInfo] = React.useState({ current: 0, size: 10, total: 0, page: 0 });
  const [list, setList] = React.useState([]);
  const [loading, request] = useRequest(getBoundList);

  const height = 500;
  const itemSize = 100;
  const dataLen = list.length;

  // 所有数据读取完毕
  const isFinished = pageInfo.current > 0 && pageInfo.current * pageInfo.size >= pageInfo.total;

  const queryData = (params) => {
    request(params).then(res => {
      const { records, ...page } = res;
      if (page.current === 1) {
        setList(records || []);
      } else {
        setList(list.concat(records || []));
      }
      setPageInfo(page);
    }, []);
  };

  const onScroll = ({scrollDirection, scrollOffset}) => {
    
    if (
      // 数据还有
      !isFinished &&
      // 避免重复加载数据
      !loading &&
      // 只有往前滚动我们才触发
      scrollDirection === 'forward' &&
      // 5 = (列表高度 / 单项列表高度)
      // 100 = 滚动提前加载量，可根据样式情况调整
      scrollOffset > ((dataLen - Math.floor(height / itemSize) ) * itemSize - 50)
    ) {
      queryData({ pageNum: pageInfo.current + 1 , pageSize: 6 })
    }
  }

  return (
    <View>
      <VirtualList
        height={height}
        itemData={list}
        itemCount={dataLen}
        itemSize={itemSize}
        width="100%"
        onScroll={onScroll}
      >
        {Row}
      </VirtualList>
      {
        loading && <Loading />
      }
      {
        isFinished && <View className="finish-tip">我是有底线的 ~</View>
      }
    </View>
  )
}