antdMobile 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')}
      />
    );
  }
}