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;
          }
        }
      });
    },
  }

  

posted @ 2021-05-19 10:48  will很忙  阅读(7704)  评论(0编辑  收藏  举报