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

文章介绍了如何利用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>
    )
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值