react实现触底加载

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

安装第三方库：

yarn add antd-mobile
npm i antd-mobile

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

var express = require('express');
var router = express.Router();
const { chudiModel } = require('../db/model')

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

});

module.exports = router;

 

前端react框架

import { useEffect, useState } from 'react';
import './index.css';
import axios from 'axios';
import { InfiniteScroll } from 'antd-mobile';
import { sleep } from 'antd-mobile/es/utils/sleep'


export default function IndexPage() {
  const [data, setdata] = useState([]) //数据
  const [len, setlen] = useState(8) //数据条数
  const [hasMore, setHasMore] = useState(false)

  const getdata = async () => {
    let data = await axios.get('http://localhost:3000/list?len=' + len)

    setHasMore(data.data.hasMore)
    setdata(data.data.data)
    if (data.data.hasMore == true) {
      setlen(len + 5)
    }
  }
  async function loadMore() {
    await sleep(2000) //等待两秒
    getdata() //请求数据
  }

  useEffect(() => {
    getdata() //初始化数据
  }, [])

  return (
    <div>
      <div className='top'>
        <ul>
          <li>鞋子</li>
          <li>衣服</li>
          <li>家具用品</li>
          <li>电器</li>
          <li>电饭煲</li>
          <li>更多</li>
        </ul>
      </div>
      <div className='content'>
        {
          data.map(item => (
            <div className='box' key={item._id}>
              <img src='./1.png' alt="" className='img' />
              <div className='zi'>{item.title}</div>
            </div>
          ))
        }
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
    </div>
  );
}