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商品列表无限加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了el-form错误提示信息手动添加和取消,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了element-ui封装一个Table模板组件的示例，帮助大家更好的理解和学习vue框架的使用，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了Vue的全局过滤器和私有过滤器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
在 Vue3 中,setup 函数是一个新引入的概念,它代替了之前版本中的 data、computed、methods 等选项,用于设置组件的初始状态和逻辑,本文将主要介绍Setup的基本用法和少量原理,感兴趣的朋友一起看看吧2024-02-02
这篇文章主要介绍了vue如何通过$router.push传参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue中关于router.beforeEach()的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要为大家介绍了Element-ui Drawer抽屉按需引入基础使用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了实现一个Vue版Upload组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
这篇文章主要介绍了vue使用router-view调用页面方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
最新评论