前端Vue3列表滑动无限加载功能实现
更新时间：2025年05月29日 14:44:51 作者：夏霞.
这篇文章主要介绍了前端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列表滑动无限加载实现就完成了
到此这篇关于前端Vue3列表滑动无限加载实现的文章就介绍到这了,更多相关Vue列表无限加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家分享了Vue中watch监听属性新旧值相同问题解决方案,如果有遇到相同问题的朋友,可以参考阅读本文2023-08-08
俄罗斯方块这个游戏相信大家都玩过,下面这篇文章主要给大家介绍了关于如何利用vue3实现一个俄罗斯方块的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
electron-vite工具打包后如何通过内置配置文件动态修改接口地址
使用electron-vite 工具开发项目打包完后每次要改接口地址都要重新打包,对于多环境切换或者频繁变更接口地址就显得麻烦,这篇文章主要介绍了electron-vite工具打包后通过内置配置文件动态修改接口地址实现方法,需要的朋友可以参考下2024-05-05
今天小编就为大家分享一篇vue请求服务器数据后绑定不上的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue3+vue-cli4中使用svg的方式详解(亲测可用)
最近在做个vue的项目,从各种github上的开源库上借鉴开发方法,给大家分享下,这篇文章主要给大家介绍了关于vue3+vue-cli4中使用svg的相关资料,需要的朋友可以参考下2022-08-08
在我们日常项目开发中,经常会有表格跨页多选的需求,接下来让我们用 el-table示例一步步来实现这个需求,文中有详细的代码讲解,对我们的学习或工作有一定的帮助,需要的朋友可以参考下2023-08-08
本文重点给大家介绍Vue拖拽组件开发实例，拖拽的原理是手指在移动的过程中，实时改变元素的位置即top和left值，使元素随着手指的移动而移动。对实例代码感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
在导入.vue文件的时候,ts报错提示:找不到模块“@/Layout/index.vue”或其相应的类型声明问题
这篇文章主要介绍了在导入.vue文件的时候,ts报错提示:找不到模块“@/Layout/index.vue”或其相应的类型声明问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue router 动态路由清除方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家介绍了vue实现前端保持筛选条件到url并进行同步参数设计思路详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论