react移动端实现滑动懒加载

React移动端实现滑动懒加载可以使用react-infinite-scroll-component插件来实现。

安装插件：

npm install react-infinite-scroll-component

使用：

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

class App extends Component {
  state = {
    items: Array.from({ length: 20 }),
    hasMore: true,
  };

  fetchMoreData = () => {
    if (this.state.items.length >= 50) {
      this.setState({ hasMore: false });
      return;
    }

    // 模拟异步加载数据
    setTimeout(() => {
      this.setState({
        items: this.state.items.concat(Array.from({ length: 20 })),
      });
    }, 1500);
  };

  render() {
    return (
      <div>
        <InfiniteScroll
          dataLength={this.state.items.length} // 列表长度
          next={this.fetchMoreData} // 触底时的回调函数
          hasMore={this.state.hasMore} // 是否还有更多数据
          loader={<h4>Loading...</h4>} // 加载时的提示
          endMessage={<p>No more items</p>} // 列表到底时的提示
        >
          {this.state.items.map((item, index) => (
            <div key={index} style={{ padding: 20, border: '1px solid gray' }}>
              {`Item ${index}`}
            </div>
          ))}
        </InfiniteScroll>
      </div>
    );
  }
}

export default App;

在上面的代码中，我们使用了`react-infinite-scroll-component`插件，通过在`InfiniteScroll`组件中设置`dataLength`、`next`、`hasMore`、`loader`和`endMessage`等属性来实现滑动懒加载效果。当用户滑动到列表底部时，`next`函数将被调用，我们可以在该函数中异步加载更多数据，直到`hasMore`为`false`时停止加载。同时，在加载过程中，我们可以显示一个加载提示，当列表到达底部时，我们可以显示一个提示信息告诉用户已经没有更多数据可以加载了。