当前位置: 首页 > news >正文

前端Vue3列表滑动无限加载实现

列表无限加载功能实现

核心实现逻辑:使用elementPlus提供的 v-infinite-scrol 指令监听是否满足触底条件,满足加载条件时让页数参数加一获取下一页数据,做新老数据拼接渲染

代码实现

<div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled"><!-- 商品列表--><GoodsItem v-for="item in goodList" :key="item.id" :goods="item" /></div>

v-infinite-scroll="load":监听是否满足触底条件

:infinite-scroll-disabled="disabled": 是否当前禁用加载

// 获取基础数据列表渲染
const goodList = ref([])
const reqData = ref({categoryId: id,page: 1,pageSize: 20,sortField: 'publishTime'
})const getGoodList = async () => {const res = await getSubCategoryAPI(reqData.value)console.log(res)goodList.value = res.result.items
}// 更多加载
const disabled = ref(false)
const load = async ()=>{console.log('加载更多数据了');// 获取下一页数据reqData.value.page++const res = await getSubCategoryAPI(reqData.value)// 新老数据的拼接goodList.value = [...goodList.value, ...res.result.items] // ...goodList.value老数据 ...res.result.items新数据// 加载完毕停止监听(如果不结束监听一直向下滑动,就会不断发送新的请求,会造成一定的资源浪费)if(res.result.items.length === 0){ // 如果新数据为空,则停止监听(可以根据后端返回的数据来判断)disabled.value = true}
}

由上图可以看出前端不停的在向后端发起新的请求,当页面滑动到底部没有数据之后就不会发送请求,这样我们的前端Vue3列表滑动无限加载实现就完成了

相关文章:

  • Day128 | 灵神 | 二叉树 | 反转二叉树的奇数层
  • 深入理解Java中的BigDecimal:高精度计算的核心工具
  • 投影机三色光源和单色光源实拍对比:一场视觉体验的终极较量
  • 将Windows11下的Ubuntu应用移动到其他盘
  • 华为FreeArc能和其他华为产品共用充电线吗?
  • 使用MATLAB求解微分方程:从基础到实践
  • 数字藏品质押融资的法律风险与合规路径
  • Linux换源yum和安装nginx,mysql
  • 余弦退火:助力模型训练的优化算法
  • OpenHarmony平台驱动使用(五),HDMI
  • java 数据输出占5列,右对齐
  • Jenkins实践(10):pipeline构建历史展示包名和各阶段间传递参数
  • C 语言学习笔记(结构体1)
  • 【PP】SAP生产订单(创建-下达-发料-报工-入库)全流程及反向流程
  • 《P1379 八数码难题》
  • 编程日志5.28
  • w笔记--表格组件(Table)的sorter属性
  • 基于 STM32 的智慧农业温室控制系统设计与实现
  • 如何通过仿真软件优化丝杆升降机设计
  • `sysctl`命令深度剖析:如何优化内核参数以提升服务器网络/IO性能?
  • 中讯科技-运城网站建设/创建网站要钱吗
  • 愿意合作做游戏的网站平台/seo网络推广专员招聘
  • 公司自己做网站流程和备案/百度上做推广怎么做
  • 最好seo的wordpress/安卓优化神器
  • 东方网景网站建设/河南品牌网络推广外包
  • 毕设做网站可以用模板吗/网站推广方案模板