antd mobile 无限滚动 用法

Antd Mobile 提供了一个名为 `ListView` 的组件来实现无限滚动功能。以下是一个简单的使用示例：

import React, { useState, useEffect } from 'react';
import { ListView } from 'antd-mobile';

const dataSource = new ListView.DataSource({
  rowHasChanged: (row1, row2) => row1 !== row2,
});

const dataList = [];

for (let i = 0; i < 100; i++) {
  dataList.push(`Row ${i}`);
}

export default function InfiniteScroll() {
  const [isLoading, setIsLoading] = useState(true);
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    setDataSource(dataSource.cloneWithRows(dataList));
    setIsLoading(false);
  }, []);

  const onEndReached = () => {
    // 加载更多数据
  };

  return (
    <ListView
      dataSource={dataSource}
      renderRow={(rowData) => <div>{rowData}</div>}
      onEndReached={onEndReached}
      onEndReachedThreshold={10}
      renderFooter={() => (
        <div style={{ padding: 30, textAlign: 'center' }}>
          {isLoading ? 'Loading...' : 'Loaded'}
        </div>
      )}
    />
  );
}

以上示例中，我们首先创建了一个 `ListView.DataSource` 对象，并将其初始化为包含 100 条数据的数组。然后在 `useEffect` 钩子中，我们将数据源和状态设置为 `ListView` 组件需要的格式。当用户滚动到列表底部时，`onEndReached` 函数被调用，我们可以在这里加载更多的数据并更新数据源。`onEndReachedThreshold` 属性表示滚动到离底部还有多少像素时触发 `onEndReached` 函数。最后，我们通过 `renderFooter` 属性来渲染列表底部的加载状态。