vant List列表使用踩坑總結


  遇到問題:

  list初始化后會加載一次onLoad事件,但是當第一次不足以填滿一個屏幕時候,會一直加載知道填滿一屏幕

<van-list
  v-model:loading="state.loading"
  :finished="state.finished"
  finished-text="沒有更多了"
  @load="onLoad"
>
</van-list>  

  解決方法:

  :immediate-check="false" 屬性關閉初始化的第一次加載
在vue create生命周期函數內進行第一次請求
<van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="沒有更多了"
        :immediate-check="false"
        @load="load_more"
      >
</van-list>

created() {
    let param = {
      studentId: localStorage.getItem("userId"),
      //studentId:1,
      offset: this.offset,
      limit: this.limit,
    };
    getIntegralList(param).then((data) => {
      console.log(data);
      this.list = data.data;
    });
 },
methods: {
    onLoad() {
      let param = {
        studentId: localStorage.getItem("userId"),
        //studentId:1,
        offset: this.offset,
        limit: this.limit,
      };

      getIntegralList(param).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.loading = false;
          this.list = this.list.concat(res.data); //追加數據
          if (res.data.length == 0) {
            //數據全部加載完成
            this.finished = true;
          } else {
            this.finished = false;
          }
        }
      });
    },
  }

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM