react移动端滑动加载

在React中实现移动端滑动加载可以使用一些第三方库来帮助我们完成。

其中比较常用的是react-infinite-scroll-component。该库实现了无限滚动的功能，当用户滚动到页面底部时会触发一个回调函数来加载更多数据，从而完成滑动加载的效果。

具体使用方法如下：

1. 安装库

npm install react-infinite-scroll-component --save

2. 引入库

import InfiniteScroll from 'react-infinite-scroll-component';

3. 实现滑动加载的组件

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

class ScrollLoad extends Component {
  state = {
    items: [],
    hasMore: true,
    page: 1,
  };

  componentDidMount() {
    this.fetchData();
  }

  fetchData = () => {
    const { page } = this.state;
    fetch(`https://jsonplaceholder.typicode.com/photos?_page=${page}&_limit=10`)
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          items: [...this.state.items, ...data],
          page: page + 1,
          hasMore: data.length === 10,
        });
      });
  };

  render() {
    const { items, hasMore } = this.state;

    return (
      <InfiniteScroll
        dataLength={items.length}
        next={this.fetchData}
        hasMore={hasMore}
        loader={<h4>Loading...</h4>}
      >
        {items.map((item) => (
          <div key={item.id}>
            <h3>{item.title}</h3>
            <img src={item.url} alt={item.title} />
          </div>
        ))}
      </InfiniteScroll>
    );
  }
}

export default ScrollLoad;

在上面的代码中，我们使用了一个列表来展示数据，同时使用了react-infinite-scroll-component来实现滑动加载的效果。在组件中，我们使用state来保存数据和一些状态，通过fetchData方法来加载更多数据，当用户滑动到页面底部时，会自动触发next方法来加载更多数据。同时，我们还设置了一个loader来显示正在加载中的提示。

最后，我们将列表包裹在InfiniteScroll组件中，设置hasMore属性为true，表示还有更多的数据需要加载，dataLength属性表示当前已经加载的数据的长度，next属性表示下一次需要加载数据的方法。