快捷導(dǎo)航

Vue移動端下拉加載更多數(shù)據(jù)onload實現(xiàn)方法淺析

更新時間：2023年02月15日 15:04:59 作者：搬磚IT員

這篇文章主要介紹了Vue移動端下拉加載更多數(shù)據(jù)onload實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

思想：van-list組件負(fù)責(zé)UI層監(jiān)測觸底, 執(zhí)行onload函數(shù), page++, 請求下頁數(shù)據(jù), 和現(xiàn)在數(shù)據(jù)合并顯示更多, 設(shè)置loading為false, 確保下次觸底還能執(zhí)行onLoad

vant是一個可用于移動端的組件庫，搭建頁面框架，需要使用到vant組件，添加依賴yarn add vant@2.12.15至vue2項目內(nèi)，此處用到van-list組件。

vant中的組件van-list來動態(tài)渲染數(shù)據(jù)，下拉加載首先需要綁定變量loading(加載狀態(tài))、屬性finished(是否全部加載完成)，finished-text全部加載完成顯示的文字

 <van-list
     v-model="loading"
     :finished="finished"
     finished-text="沒有更多了"
     @load="onLoad"
  >
       正常的遍歷searchResult內(nèi)數(shù)據(jù) 渲染至頁面內(nèi)容
 </van-list>

數(shù)據(jù)：注意要有當(dāng)前頁頁碼page配合實現(xiàn)

data() {
    return {
      searchResult: [],  //搜索到的總的數(shù)據(jù)，用此數(shù)組內(nèi)數(shù)據(jù)來遍歷展示
      loading: false,  //加載中 (狀態(tài)) - 只有為false, 才能觸底后自動觸發(fā)onload方法
      finished: false,   // 未加載全部 (如果設(shè)置為true, 底部就不會再次執(zhí)行onload, 代表全部加載完成)
      page: 1,  // 當(dāng)前搜索結(jié)果的頁碼
    };
  },

以上為準(zhǔn)備的數(shù)據(jù)，

onload 下拉刷新加載更多數(shù)據(jù) （觸底后加載下一頁數(shù)據(jù)）

思想：

1、監(jiān)測頁面觸底執(zhí)行onload事件（onload事件:頁面內(nèi)所有元素包括圖片等都加載完成后執(zhí)行）

2、配合后臺接口，傳遞下一頁的標(biāo)識

3、拿到下一頁數(shù)據(jù)后追加到當(dāng)前數(shù)組末尾即可

<script>
export default {
  methods: {
    // 此為js代碼，監(jiān)聽事件，發(fā)送異步操作的數(shù)據(jù)請求
    async btn2() {
      this.loading = false // 優(yōu)化bug，防止出現(xiàn)首次多加載一次的情況
      this.finished = false // 加載未結(jié)束
      this.page = 1 // 走完函數(shù)，就將當(dāng)前頁恢復(fù)至1，防止后面累加，導(dǎo)致點擊別的篩選條件時無效
      // 異步發(fā)送請求獲取數(shù)據(jù)賦值給data內(nèi)變量
      const { data } = await getSearchResult({
        keywords: this.value, // 此為接口需要的參數(shù)
        limit: 20
      })
      this.searchResult = data.result.songs
    },
    async onLoad() { // 觸底事件(要加載下一頁的數(shù)據(jù)), 內(nèi)部會自動把loading改為true，為true后才會執(zhí)行x
      this.page++ // 加載至底部就將頁面值+1
      const { data } = await getSearchResult({
        keywords: this.value,
        limit: 20,
        offset: (this.page - 1) * 20 // 傳參固定公式，頁面偏移量即一頁多少數(shù)據(jù)
      })
      if (data.result.songs === undefined) { // 下拉刷新后此次檢索不到數(shù)據(jù)了，表示已經(jīng)將所有數(shù)據(jù)加載完了
        return (this.finished = true) // finished賦值為true，表示 不再去進(jìn)行加載了，結(jié)束狀態(tài)
      }
      this.searchResult.push(...data.result.songs) // 將每次下拉刷新檢索到的數(shù)據(jù)加入 展示的數(shù)據(jù)列表
      this.loading = false // 切記，本次加載完更多數(shù)據(jù)后,一定要把loading改成false, 保證下一次還能觸發(fā)onload方法
    }
  }
}
</script>

第一次發(fā)送getSearchResult數(shù)據(jù)請求為加載第一頁數(shù)據(jù)，限制獲取數(shù)據(jù)數(shù)量limit為20條，第二次getSearchResult則是下拉到底，再去獲取20條數(shù)據(jù)，再添加到第一次保存數(shù)據(jù)的數(shù)組里，這樣就有40條數(shù)據(jù)同時渲染在了頁面上，以后每下拉一次，就是此種操作，從請求里獲取不到數(shù)據(jù)了，將finished賦值為true下拉加載事件就會停止

到此這篇關(guān)于Vue移動端下拉加載更多數(shù)據(jù)onload實現(xiàn)方法淺析的文章就介紹到這了,更多相關(guān)Vue下拉加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: