react-infinite-scroller

react-infinite-scroller 是一个用于 React 应用的无限滚动组件，使您可以在滚动容器中加载无限数据，以实现更流畅的用户体验。

特性

• 支持垂直和水平滚动
• 支持自定义加载指示器
• 支持自定义加载阈值
• 支持触发加载数据的不同事件
• 适用于移动端和桌面端应用
• 具有响应式布局，适应不同的容器尺寸

安装

您可以使用 npm 或 yarn 来安装 react-infinite-scroller。

npm install react-infinite-scroller

或

yarn add react-infinite-scroller

用法

在您的 React 组件中导入 react-infinite-scroller 并使用它作为容器包装您的内容。

import React, { Component } from 'react';
import InfiniteScroll from 'react-infinite-scroller';

class MyComponent extends Component {
  constructor() {
    super();
    this.state = {
      items: [],  // 用于存储加载的数据
      hasMore: true,  // 是否还有更多数据可供加载
    };
  }

  // 加载更多数据的函数
  loadMoreData = () => {
    // 模拟异步加载数据的过程
    setTimeout(() => {
      // 获取新数据并将其添加到已有数据中
      const newData = [...this.state.items, ...yourNewData];

      this.setState({
        items: newData,
        hasMore: false,  // 如果还有更多数据可供加载，设置为 true
      });
    }, 1500);
  }

  render() {
    return (
      <InfiniteScroll
        pageStart={0}
        loadMore={this.loadMoreData}
        hasMore={this.state.hasMore}
        loader={<div className="loader">Loading...</div>}
      >
        {this.state.items.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </InfiniteScroll>
    );
  }
}

export default MyComponent;

API

以下是可用的 props：

• pageStart: number - 初始加载时的页面索引，默认为 0。
• loadMore: function - 加载更多数据的函数。
• hasMore: boolean - 是否还有更多数据可供加载。
• loader: element - 自定义加载指示器的元素。
• threshold: number - 触发加载更多数据的阈值，默认为 250。
• useWindow: boolean - 是否在窗口滚动中触发加载事件，默认为 true。
• isReverse: boolean - 是否逆序渲染加载的数据，默认为 false。

更多信息和用法示例请参阅 GitHub 仓库。

以上为 react-infinite-scroller 的介绍，希望对您有帮助！