vue實(shí)現(xiàn)商品列表的無限加載思路和步驟詳解
更新時(shí)間：2024年06月21日 11:45:01 作者：Jerry_前端
這篇文章主要介紹了vue實(shí)現(xiàn)商品列表的無限加載思路和步驟詳解,基礎(chǔ)思路是觸底條件滿足之后 page++,拉取下一頁數(shù)據(jù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下,
基礎(chǔ)思路
- 觸底條件滿足之后 page++，拉取下一頁數(shù)據(jù)
- 新老數(shù)據(jù)做數(shù)組拼接
- 判斷是否已經(jīng)全部加載完畢，停止監(jiān)聽
步驟1：加載下一頁數(shù)據(jù)
重構(gòu)商品二級(jí)分類組件
注:v-infinite-scroll為elementPlus中Infinite Scroll無限滾動(dòng)的自定義指令
<div class="body" v-infinite-scroll="load" >
<!-- 商品列表-->
<GoodsItem v-for="good in goodList" :good="good" :key="good.id"></GoodsItem>
</div>//加載更多
const load = async () => {
// 獲取下一頁的數(shù)據(jù)
reqData.value.page++
console.log(reqData.value.page)
const res = await getSubCategoryAPI(reqData.value)
//新加載的數(shù)據(jù)與老數(shù)據(jù)進(jìn)行拼接合并
goodList.value = [...goodList.value, ...res.result.items]
}
// 獲取二級(jí)分類商品
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：無數(shù)據(jù)停止加載
重構(gòu)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>到此這篇關(guān)于vue實(shí)現(xiàn)商品列表的無限加載的文章就介紹到這了,更多相關(guān)vue商品列表無限加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vant是有贊前端團(tuán)隊(duì)開源的移動(dòng)端組件庫(kù),于2017年開源,已持續(xù)維護(hù)4年時(shí)間,下面這篇文章主要給大家介紹了關(guān)于Vue3中使用vant的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途
這篇文章主要介紹了vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue模板語法-插值，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-03-03
這篇文章主要為大家介紹了Vue2如何支持composition API示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue2.0嵌套路由實(shí)現(xiàn)豆瓣電影分頁功能(附demo)
這篇文章主要介紹了vue2.0嵌套路由實(shí)現(xiàn)豆瓣電影分頁功能(附demo),這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2017-03-03
這篇文章主要介紹了vue引入cesium問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
web前端Vue報(bào)錯(cuò):Uncaught?(in?promise)?TypeError:Cannot?read?
這篇文章主要給大家介紹了關(guān)于web前端Vue報(bào)錯(cuò):Uncaught?(in?promise)?TypeError:Cannot?read?properties?of?nu的解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue之proxyTable代理超全面配置流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹的是vue 如何實(shí)現(xiàn)表單校驗(yàn)的方法，又代碼詳細(xì)解說，感興趣的小伙伴可以參考下面文章的具體內(nèi)容2021-09-09
Vue2中無法監(jiān)聽數(shù)組和對(duì)象的某些變化問題
這篇文章主要介紹了Vue2中無法監(jiān)聽數(shù)組和對(duì)象的某些變化問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08