react实现触底加载

React+Antd 实现数据的触底加载(koa2后端数据)

效果

触底加载效果

用到了 antd-mobile第三方库中的InfiniteScroll 无限滚动
安装第三方库：

yarn add antd-mobile
npm i antd-mobile

后端接口，使用的node koa2框架：

router.get('/list', async (req, res) => {
  let len = req.query.len  //接收数组的长度
  data = await swiperModel.find().limit(len) //使用limit进行截取
  let lens = (await swiperModel.find()).length //所有的数据条数
  if (lens > len) {  //如果所有数据条数大于想要的数据条数 说明还可以进行加载数据
    res.send({
      status: 200,
      msg: '获取成功',
      data,
      hasMore: true //为true的时候说明还可以在加载数据
    }
    )
  } else { //想要的数据条数 大于总数据数据条数了 不能进行触底加载了
    res.send({
      status: 200,
      msg: '获取成功',
      data,
      hasMore: false //不能在进行触底加载了
    })
  }

})

前端react框架

import React, { useEffect, useState } from 'react'
import { InfiniteScroll } from 'antd-mobile';
import { sleep } from 'antd-mobile/es/utils/sleep'
import axios from '../../server/request'
import './style.css'
export default function Loading() {
    const [data, setDate] = useState([]) //数据
    const [len, setlen] = useState(6) //数据条数
    const [hasMore, setHasMore] = useState(true);

    function getList() {
        axios.get(`/list?len=${len}`).then(res => {
            console.log(res, '55555');
            if (res.hasMore === true) {  //如果为true，说明还能继续加载数据
                setlen(len + 5) //加五条数据
            }
            setHasMore(res.hasMore)  //修改是否加载状态
            setDate(res.data)
        })
    }
    async function loadMore() {
        await sleep(2000)  //等待两秒
        getList() //请求数据
    }
    useEffect(() => {
        getList()  //初始数据
    }, [])
    return (
        <div className='loading'>
            <div id="page-top" />
            <div className='box'>
                {
                    data.map(item => (
                        <div className='item' key={item._id}>
                            <img src={item.pic} alt="" />
                            <p className='title'>{item.title}</p>
                            <p className='price'>￥{item.price}</p>
                        </div>
                    ))
                }
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </div>
        </div>
    )
}