antdMobile InfiniteScroll无限滚动

Ant Design Mobile 的 InfiniteScroll 组件用于实现无限滚动的列表。当列表滚动到底部时，会触发一个加载更多数据的操作。

以下是一个使用 InfiniteScroll 组件的简单例子：

import React from 'react';
import { ListView, InfiniteScroll } from 'antd-mobile';
 
// 初始化ListView
const ds = new ListView.DataSource({
  rowHasChanged: (r1, r2) => r1 !== r2,
});
 
export default class InfiniteListExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ds.cloneWithRows([]), // 初始数据为空数组
      isLoading: false, // 加载状态
      hasMore: true, // 是否有更多数据
    };
  }
 
  // 模拟加载数据的函数
  loadMoreData = () => {
    if (!this.state.hasMore || this.state.isLoading) {
      // 如果没有更多数据或者当前正在加载，则直接返回
      return;
    }
 
    this.setState({ isLoading: true });
    // 模拟异步加载数据
    setTimeout(() => {
      // 这里添加加载数据的逻辑，比如从服务器获取数据
      const newData = [...this.state.data.getAllData(), ...newDataToBeLoaded];
 
      // 检查是否已经加载了所有数据
      if (newData.length >= totalNumberOfItems) {
        this.setState({
          isLoading: false,
          hasMore: false,
          data: this.state.data.cloneWithRows(newData),
        });
      } else {
        this.setState({
          isLoading: false,
          data: this.state.data.cloneWithRows(newData),
        });
      }
    }, 1000);
  };
 
  render() {
    return (
      <ListView
        dataSource={this.state.data}
        renderRow={(rowData) => <div>{rowData}</div>}
        style={{ height: '500px', border: '1px solid #ddd' }}
        pullToRefresh={<PullToRefresh onRefresh={this.loadMoreData} />} // 下拉刷新
        onEndReached={this.loadMoreData} // 滚动到底部时触发
        onEndReachedThreshold={10} // 距离底部10px时开始加载
        renderFooter={(loading) => (loading ? 'Loading...' : 'No more data')}
      />
    );
  }
}

在这个例子中，loadMoreData 方法模拟了异步加载数据的过程，并在数据加载完毕后更新组件的状态。onEndReached 属性设置了当列表滚动到底部时要执行的函数。renderFooter 属性用于在加载过程中显示一个加载提示，当没有更多数据时显示“No more data”。