vue实现商品列表的无限加载思路和步骤详解
更新时间：2024年06月21日 11:45:01 作者：Jerry_前端
这篇文章主要介绍了vue实现商品列表的无限加载思路和步骤详解,基础思路是触底条件满足之后 page++,拉取下一页数据,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下,
基础思路
- 触底条件满足之后 page++，拉取下一页数据
- 新老数据做数组拼接
- 判断是否已经全部加载完毕，停止监听
步骤1：加载下一页数据
重构商品二级分类组件
注:v-infinite-scroll为elementPlus中Infinite Scroll无限滚动的自定义指令
<div class="body" v-infinite-scroll="load" >
<!-- 商品列表-->
<GoodsItem v-for="good in goodList" :good="good" :key="good.id"></GoodsItem>
</div>//加载更多
const load = async () => {
// 获取下一页的数据
reqData.value.page++
console.log(reqData.value.page)
const res = await getSubCategoryAPI(reqData.value)
//新加载的数据与老数据进行拼接合并
goodList.value = [...goodList.value, ...res.result.items]
}
// 获取二级分类商品
const goodList = ref([])
const reqData = ref({
categoryId: route.params.id,
page: 1,
pageSize: 20,
sortField: 'publishTime'
})
const getGoodList = async () => {
const res = await getSubCategoryAPI(reqData.value)
goodList.value = res.result.items
}
onMounted(() => getGoodList())步骤2：无数据停止加载
重构template与script,infinite-scroll-disabled也是Infinite Scroll的指令
<div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
<!-- 商品列表-->
<GoodsItem v-for="good in goodList" :good="good" :key="good.id"></GoodsItem>
</div>到此这篇关于vue实现商品列表的无限加载的文章就介绍到这了,更多相关vue商品列表无限加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决vue项目使用font-awesome,build后路径的问题
今天小编就为大家分享一篇解决vue项目使用font-awesome,build后路径的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Mock.js 是一个可以在开发阶段模拟后端数据接口的 JavaScript 库,它能够生成大量不同类型的随机数据,并且模拟真实的接口返回,允许前端开发在没有真实后端接口的情况下进行开发,本文给大家介绍了Vue2项目中Mock.js的完整集成与使用教程,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了vue实现dot-dropdown的相关操作,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2025-06-06
webpack提供的反向代理服务器在开发阶段非常方便，几行简单的代码配置就可以使用反向代理功能，包括路径重写、cookie处理等。这篇文章主要介绍了vue webpack重写cookie路径,需要的朋友可以参考下2019-07-07
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
这篇文章主要介绍了在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue首页加载白屏原因以及10种解决方法汇总，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
解决VueCil代理本地proxytable无效报错404的问题
这篇文章主要介绍了解决VueCil代理本地proxytable无效报错404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
随着人工智能的发展，图像识别和人脸识别技术已经被广泛应用于各种应用程序中，Vue为我们提供了许多实用工具和库，可以帮助我们在应用程序中进行图像识别和人脸识别，在本文中，我们将介绍如何使用Vue进行图像识别和人脸对比,需要的朋友可以参考下2023-06-06
文章介绍了Vue项目中批量自动引入与注册的技术,包括组件自动注册、路由自动生成、工具链集成和最佳实践,通过动态扫描目录、自动解析模块、智能注册等方式,这些技术可以显著提升开发效率,文章还提供了具体的实现方案和最佳实践,希望能为Vue开发带来帮助2025-10-10
下面小编就为大家分享一篇对vue里函数的调用顺序介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论