快捷導(dǎo)航

前端Vue3列表滑動無限加載功能實(shí)現(xiàn)

更新時間：2025年05月29日 14:44:51 作者：夏霞.

這篇文章主要介紹了前端Vue3列表滑動無限加載功能實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

列表無限加載功能實(shí)現(xiàn)

核心實(shí)現(xiàn)邏輯:使用elementPlus提供的 v-infinite-scrol 指令監(jiān)聽是否滿足觸底條件，滿足加載條件時讓頁數(shù)參數(shù)加一獲取下一頁數(shù)據(jù)，做新老數(shù)據(jù)拼接渲染

代碼實(shí)現(xiàn)

<div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
         <!-- 商品列表-->
         <GoodsItem v-for="item in goodList" :key="item.id" :goods="item" />
      </div>

v-infinite-scroll="load":監(jiān)聽是否滿足觸底條件

:infinite-scroll-disabled="disabled": 是否當(dāng)前禁用加載

// 獲取基礎(chǔ)數(shù)據(jù)列表渲染
const goodList = ref([])
const reqData = ref({
  categoryId: id,
  page: 1,
  pageSize: 20,
  sortField: 'publishTime'
})
const getGoodList = async () => {
  const res = await getSubCategoryAPI(reqData.value)
  console.log(res)
  goodList.value = res.result.items
}
// 更多加載
const disabled = ref(false)
const load = async ()=>{
  console.log('加載更多數(shù)據(jù)了');
  // 獲取下一頁數(shù)據(jù)
  reqData.value.page++
  const res = await getSubCategoryAPI(reqData.value)
  // 新老數(shù)據(jù)的拼接
  goodList.value = [...goodList.value, ...res.result.items] // ...goodList.value老數(shù)據(jù) ...res.result.items新數(shù)據(jù)
  // 加載完畢停止監(jiān)聽（如果不結(jié)束監(jiān)聽一直向下滑動，就會不斷發(fā)送新的請求，會造成一定的資源浪費(fèi)）
  if(res.result.items.length === 0){ // 如果新數(shù)據(jù)為空，則停止監(jiān)聽(可以根據(jù)后端返回的數(shù)據(jù)來判斷)
    disabled.value = true
  }
}

由上圖可以看出前端不停的在向后端發(fā)起新的請求，當(dāng)頁面滑動到底部沒有數(shù)據(jù)之后就不會發(fā)送請求，這樣我們的前端Vue3列表滑動無限加載實(shí)現(xiàn)就完成了

到此這篇關(guān)于前端Vue3列表滑動無限加載實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue列表無限加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue.set()和this.$set()使用和區(qū)別
我們發(fā)現(xiàn)Vue.set()和this.$set()這兩個api的實(shí)現(xiàn)原理基本一模一樣，那么Vue.set()和this.$set()的區(qū)別是什么，本文詳細(xì)的介紹一下，感興趣的可以了解一下
2021-06-06
Vue實(shí)現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法
今天小編就為大家分享一篇Vue實(shí)現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-07-07
Vue無后端配合實(shí)現(xiàn)導(dǎo)出功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何在無后端配合的情況下實(shí)現(xiàn)導(dǎo)出功能,文中的示例代碼簡潔易懂,有需要的小伙伴可以跟隨小編一起了解一下
2024-01-01
Vue2.0利用 v-model 實(shí)現(xiàn)組件props雙向綁定的優(yōu)美解決方案
本篇文章主要介紹了Vue2 利用 v-model 實(shí)現(xiàn)組件props雙向綁定的優(yōu)美解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-03-03
VUEX采坑之路之獲取不到$store的解決方法
今天小編就為大家分享一篇VUEX采坑之路之獲取不到$store的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue代理報錯404問題及解決(vue配置proxy)
這篇文章主要介紹了Vue代理報錯404問題及解決(vue配置proxy)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue項目運(yùn)行或打包時,頻繁內(nèi)存溢出情況問題
這篇文章主要介紹了vue項目運(yùn)行或打包時，頻繁內(nèi)存溢出情況的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
探索?Vue.js?組件的最新特性(最新整理)
本文將深入探討 Vue.js 組件的一些最新特性,包括組合式 API、Teleport、Suspense 等,幫助開發(fā)者更好地掌握和運(yùn)用這些特性,從而構(gòu)建出更加高效、復(fù)雜的前端應(yīng)用,感興趣的朋友一起看看吧
2025-07-07
vue中pc移動滾動穿透問題及解決
這篇文章主要介紹了vue中pc移動滾動穿透問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07