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