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

原创已于 2023-09-19 09:25:19 修改 · 372 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2023-03-28 11:10:43 首次发布

React 专栏收录该内容

11 篇文章

订阅专栏

文章介绍了如何利用antd-mobile的InfiniteScroll组件和Node.js的Koa2框架，实现前端无限滚动加载数据的功能。后端通过设置limit截取数据，根据数据量判断是否还有更多数据可加载，前端则通过监听滚动事件，动态请求更多数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果：

安装第三方库：

$ npm install --save antd-mobile
# or
$ yarn add antd-mobile

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

router.get("/getcart", async (ctx, next) => {
  let len = ctx.request.query.len  //接收数组长度
  let data = await cartmodel.find().limit(len)  //limit进行截取
  let lengs = (await cartmodel.find()).length //所有数据条数
  if (lengs > len) {  //如果所有数据条数大于 想要的数据条数  说明你还可以再进行加载数据
    ctx.body = {
      code: 200,
      msg: "获取成功",
      data,
      hasmore: true  //为true你还可以再加载数据
    }
  } else {  //想要的数据条数 大于总数据数据条数了 不能进行触底加载了
    ctx.body = {
      code: 200,
      msg: "获取成功",
      data,
      hasmore: false  //不能在进行触底加载了
    }
  }
})

前端：

首次请求接口渲染5条

后端返回true，将数据条数加5，

触底触发函数，再次请求接口，这时候得到的是10条数据

依次循环直到后端返回false 数据请求完了。

代码：

import React, { useEffect, useState } from 'react'
import { InfiniteScroll, List } from 'antd-mobile';
import { sleep } from 'antd-mobile/es/utils/sleep'
import axios from 'axios'

export default function Cart() {
    const [arr, setarr] = useState([]) //数据
    const [len, setlen] = useState(5) //数据条数
    const [hasMore, setHasMore] = useState(true);



    function jiekou() {
        axios.get(`http://localhost:3001/getcart?len=${len}`).then(({ data }) => {
            console.log(data);
            if (data.hasmore === true) {  //如果为true，说明还能继续加载数据
                setlen(len + 5) //加五条数据
            }
            setHasMore(data.hasmore)  //修改是否加载状态
            setarr(data.data)
        })
    }

    async function loadMore() {
        await sleep(2000)  //等待两秒
        jiekou() //请求数据
    }

    useEffect(() => {
        jiekou()  //初始数据
    }, [])
    return (
        <div className='cartBOX'>
            {
                arr.map(item => (
                    <div className='cartboxhe' key={item._id}>
                        <img src={item.pic} alt="" />
                        <p>{item.title}</p>
                    </div>
                ))
            }
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </div>
    )
}