您现在的位置是:首页 > 正文

react实现触底加载

2024-02-01 01:24:23阅读 2

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>
    )
}

网站文章

  • 解决plsql中文乱码问题 热门推荐

    原因:本机没有配置数据库字符集环境变量,或是与数据库字符集不一致。 步骤一:在plsql中执行 select userenv(&#39;language&#39;) from dual; 或是执 se...

    2024-02-01 01:24:17
  • Spring Data Commons 远程命令执行漏洞(CVE-2018-1273)复现

    Spring Data Commons 远程命令执行漏洞(CVE-2018-1273)复现

    1.通过&quot;docker-compose build&quot;和&quot;docker-compose up -d&quot;拉取环境 刚开始直接敲命令docker-compose bui...

    2024-02-01 01:24:10
  • 郑州大学计算机应用基础测试题,郑州大学《计算机应用基础》网上考试习题.pdf...

    精品文档一、单项选择题( 30 道小题,共 60 分)1、在 PowerPoint 的数据表中,数字默认是( )。 (2 分)A、左对齐 B、右对齐C、居中 D、两端对齐2 、提供不可靠传输...

    2024-02-01 01:24:02
  • 三跨计算机考研学校推荐,考研实现三跨—跨学校,跨地区,跨学科现实吗?

    三跨计算机考研学校推荐,考研实现三跨—跨学校,跨地区,跨学科现实吗?

    原标题:考研实现三跨—跨学校,跨地区,跨学科现实吗?个人认为:不现实,比较传奇。三跨生是指:在全国硕士研究生招生考试中,通过跨学校(学校层次不同)、跨地区(两地之间发展水平不同,且地理距离较远)、跨学...

    2024-02-01 01:23:32
  • java的HashSet

    java的HashSet

    文章目录java的HashSetHashSet的增删查增(add)删(remove)查(contains)HashSet的迭代HashSet的长度(size()) java的HashSet HashS...

    2024-02-01 01:23:24
  • 流程控制 if----else

    流程控制: 对PHP程序执行的过程进行控制! PHP有哪些手段对程序执行过程进行控制!一、顺序执行 自上而下的执行即可! 对这个执行过程没有控制!二、分支执行 分支执行可以根据条件是否满足来选择执行某些代码,PHP的分支执行主要通过两种语句(if,switch)来实现! 1.if语句 注意:我们if语句的表达式所控制的代码,最好用花括号括起来,哪怕就是一条语句也用花括号括起来! ...

    2024-02-01 01:23:17
  • 一天吃透消息队列面试八股文

    一天吃透消息队列面试八股文

    有些特殊框架(如:redis、kafka、zeroMq等)根据自身需要未严格遵循MQ规范,而是基于TCP\IP自行封装了一套协议,通过网络socket接口进行传输,实现了MQ的功能。

    2024-02-01 01:22:49
  • Codeforces Round #627 (Div. 3)题解

    Codeforces Round #627 (Div. 3)题解

    A. Yet Another Tetris Problem 题目 time limit per test 2 seconds memory limit per test 256 megabytes i...

    2024-02-01 01:22:42
  • (11)web安全|渗透测试|网络安全 漏洞挖掘的重点环节及基础知识

    (11)web安全|渗透测试|网络安全 漏洞挖掘的重点环节及基础知识

    (11)web安全|渗透测试|网络安全 漏洞挖掘的重点环节及基础知识

    2024-02-01 01:22:36
  • vCenter 服务器漏洞可导致代码执行和认证绕过

    vCenter 服务器漏洞可导致代码执行和认证绕过

    聚焦源代码安全,网罗国内外最新资讯!编译:代码卫士VMware 修复了位于 vCenter Server 中的多个高危漏洞,可导致攻击者获得代码执行权限并绕过未修复系统上的认证。vCenter Ser...

    2024-02-01 01:22:07