快捷導(dǎo)航

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)商品二級分類組件

注: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]  
}
// 獲取二級分類商品
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

解決vue項(xiàng)目使用font-awesome,build后路徑的問題
今天小編就為大家分享一篇解決vue項(xiàng)目使用font-awesome,build后路徑的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue2項(xiàng)目中Mock.js的完整集成與使用教程
Mock.js 是一個(gè)可以在開發(fā)階段模擬后端數(shù)據(jù)接口的 JavaScript 庫,它能夠生成大量不同類型的隨機(jī)數(shù)據(jù),并且模擬真實(shí)的接口返回,允許前端開發(fā)在沒有真實(shí)后端接口的情況下進(jìn)行開發(fā),本文給大家介紹了Vue2項(xiàng)目中Mock.js的完整集成與使用教程,需要的朋友可以參考下
2025-02-02
vue 實(shí)現(xiàn)dot-dropdown的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)dot-dropdown的相關(guān)操作,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2025-06-06
vue webpack重寫cookie路徑的方法
webpack提供的反向代理服務(wù)器在開發(fā)階段非常方便，幾行簡單的代碼配置就可以使用反向代理功能，包括路徑重寫、cookie處理等。這篇文章主要介紹了vue webpack重寫cookie路徑,需要的朋友可以參考下
2019-07-07
在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作
這篇文章主要介紹了在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue首頁加載白屏原因以及10種解決方法匯總
這篇文章主要介紹了Vue首頁加載白屏原因以及10種解決方法匯總，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
解決VueCil代理本地proxytable無效報(bào)錯(cuò)404的問題
這篇文章主要介紹了解決VueCil代理本地proxytable無效報(bào)錯(cuò)404的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
詳解如何使用Vue實(shí)現(xiàn)圖像識別和人臉對比
隨著人工智能的發(fā)展，圖像識別和人臉識別技術(shù)已經(jīng)被廣泛應(yīng)用于各種應(yīng)用程序中，Vue為我們提供了許多實(shí)用工具和庫，可以幫助我們在應(yīng)用程序中進(jìn)行圖像識別和人臉識別，在本文中，我們將介紹如何使用Vue進(jìn)行圖像識別和人臉對比,需要的朋友可以參考下
2023-06-06
vue批量自動(dòng)引入并注冊組件或路由教程
文章介紹了Vue項(xiàng)目中批量自動(dòng)引入與注冊的技術(shù),包括組件自動(dòng)注冊、路由自動(dòng)生成、工具鏈集成和最佳實(shí)踐,通過動(dòng)態(tài)掃描目錄、自動(dòng)解析模塊、智能注冊等方式,這些技術(shù)可以顯著提升開發(fā)效率,文章還提供了具體的實(shí)現(xiàn)方案和最佳實(shí)踐,希望能為Vue開發(fā)帶來幫助
2025-10-10
對vue里函數(shù)的調(diào)用順序介紹
下面小編就為大家分享一篇對vue里函數(shù)的調(diào)用順序介紹，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03