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

列表无限加载功能实现

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

代码实现

html 复制代码
<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":**是否当前禁用加载

javascript 复制代码
// 获取基础数据列表渲染
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列表滑动无限加载实现就完成了

相关推荐
花落文心1 小时前
使用 html2canvas + jspdf 实现页面元素下载为pdf文件
前端·javascript·pdf
掘金安东尼1 小时前
🚀 6 行 HTML,让应用瞬间“起飞”:Speculation Rules API 全解析
前端·api·浏览器
望获linux2 小时前
【Linux基础知识系列】第一百一十篇 - 使用Nmap进行网络安全扫描
java·linux·开发语言·前端·数据库·信息可视化·php
乘乘凉2 小时前
Python中函数的闭包和装饰器
前端·数据库·python
Fantastic_sj3 小时前
部分CSS笔试题讲解
前端·css
雷达学弱狗5 小时前
链式法则解释上游梯度应用
开发语言·前端·javascript
爱隐身的官人6 小时前
爬虫基础学习-爬取网页项目(二)
前端·爬虫·python·学习
Jackson@ML7 小时前
使用字节旗下的TREA IDE快速开发Web应用程序
前端·ide·trea
计算机学姐9 小时前
基于SpringBoot的社团管理系统【2026最新】
java·vue.js·spring boot·后端·mysql·spring·mybatis
烛阴9 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript