van-list不斷onLoad加載怎么解決

本篇內容介紹了“van-list不斷onLoad加載怎么解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

van-list不斷onLoad加載的坑

van-list 下拉的時候，不斷請求后臺加載數據，真的是坑。。。。

this.$http.post(url, params).then(function (res) { 
this.list = [];
if (res.data.data.length == 0) {
    that.finished = true
} else {
    that.list = [...that.list , ...res.data.data]
}
that.loading = false
 
      }).catch((reason) => {
         Toast.fail("查詢列表數據!" + reason);
      })

首先說下出現不斷加載的一種情況， 解決方法是設置:offset="20"；

這是網上常說的，然而并沒有什么卵用。。。

我這里出現不斷加載的原因是

this.list = [];

坑爹，不能清空，清空之后就會判斷沒填滿空間，就會不斷加載。。。。

van-list列表下拉加載更多onLoad事件

van-list是瀑布流滾動加載，用于展示長列表，當列表即將滾動到底部時，會觸發事件并加載更多列表項。

引入

import Vue from 'vue';
import { List } from 'vant';
 
Vue.use(List);

頁面渲染

<van-list class="mylist"
     v-model="loading"
     :finished="finished"
     finished-text="沒有更多了"
     @load="onLoad"  >
     <van-cell v-for="(item,index) in list" :key="index" class="mycell">
        {{item.name}}
     </van-cell>
</van-list>

數據定義

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      total: 0,
      // 查詢參數
      queryParams: {
           pageNum: 0,
           pageSize: 6,
           deptname: null,
           username: null,
           createTime: null,
           jigou: null,
       },
       defaultdept:null,
       keyWords:"",
    };
  },
}

方法實現

methods:{ 
        async onLoad() {
            this.loading = true;//防止第一頁重復加載
            this.queryParams.jigou = this.defaultdept
            listWuzicount(this.queryParams).then(res => {
                this.total = res.total;
                if(this.total <= this.queryParams.pageSize){
                    this.list= res.rows
                }else{
                    this.queryParams.pageNum++;
                    let arr = res.rows;
                    this.list= this.list.concat(arr);
                };
                // 加載狀態結束
                this.loading = false;
                // 數據全部加載完成
                if (this.list.length >= this.total) {
                    this.finished = true;
                }
            })
        },
},
watch:{
        defaultdept(val){
            this.queryParams.jigou = val
            this.list= []
            this.queryParams.pageNum = 1
            this.finished = false;
            this.onLoad();
        },
        keyWords(val){
            this.queryParams.deptname = val
            this.list= []
            this.queryParams.pageNum = 1
            this.finished = false;
            this.onLoad();
        },
    }

重點總結

this.queryParams.pageNum = 1
//每次走完函數，將當前頁恢復至1，防止后面累加，導致點擊別的篩選條件時無效，返回finished-text
this.finished = false;
//同樣，也要將finished恢復，否則，執行別的篩選條件時，會顯示finished-text,并且導致明明還有數據,但是不會加載出來.

“van-list不斷onLoad加載怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！