vue實現(xiàn)商品列表的無限加載思路和步驟詳解
更新時間：2024年06月21日 11:45:01 作者：Jerry_前端
這篇文章主要介紹了vue實現(xiàn)商品列表的無限加載思路和步驟詳解,基礎(chǔ)思路是觸底條件滿足之后 page++,拉取下一頁數(shù)據(jù),結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下,
基礎(chǔ)思路
- 觸底條件滿足之后 page++，拉取下一頁數(shù)據(jù)
- 新老數(shù)據(jù)做數(shù)組拼接
- 判斷是否已經(jīng)全部加載完畢，停止監(jiān)聽
步驟1：加載下一頁數(shù)據(jù)
重構(gòu)商品二級分類組件
注: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ù)停止加載
重構(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實現(xiàn)商品列表的無限加載的文章就介紹到這了,更多相關(guān)vue商品列表無限加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue項目使用font-awesome,build后路徑的問題
今天小編就為大家分享一篇解決vue項目使用font-awesome,build后路徑的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Mock.js 是一個可以在開發(fā)階段模擬后端數(shù)據(jù)接口的 JavaScript 庫,它能夠生成大量不同類型的隨機數(shù)據(jù),并且模擬真實的接口返回,允許前端開發(fā)在沒有真實后端接口的情況下進行開發(fā),本文給大家介紹了Vue2項目中Mock.js的完整集成與使用教程,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了vue實現(xiàn)dot-dropdown的相關(guān)操作,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2025-06-06
webpack提供的反向代理服務(wù)器在開發(fā)階段非常方便，幾行簡單的代碼配置就可以使用反向代理功能，包括路徑重寫、cookie處理等。這篇文章主要介紹了vue webpack重寫cookie路徑,需要的朋友可以參考下2019-07-07
在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作
這篇文章主要介紹了在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue首頁加載白屏原因以及10種解決方法匯總，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
解決VueCil代理本地proxytable無效報錯404的問題
這篇文章主要介紹了解決VueCil代理本地proxytable無效報錯404的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
隨著人工智能的發(fā)展，圖像識別和人臉識別技術(shù)已經(jīng)被廣泛應(yīng)用于各種應(yīng)用程序中，Vue為我們提供了許多實用工具和庫，可以幫助我們在應(yīng)用程序中進行圖像識別和人臉識別，在本文中，我們將介紹如何使用Vue進行圖像識別和人臉對比,需要的朋友可以參考下2023-06-06
文章介紹了Vue項目中批量自動引入與注冊的技術(shù),包括組件自動注冊、路由自動生成、工具鏈集成和最佳實踐,通過動態(tài)掃描目錄、自動解析模塊、智能注冊等方式,這些技術(shù)可以顯著提升開發(fā)效率,文章還提供了具體的實現(xiàn)方案和最佳實踐,希望能為Vue開發(fā)帶來幫助2025-10-10
下面小編就為大家分享一篇對vue里函數(shù)的調(diào)用順序介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03