关于vue.js:关于vanpullrefresh与vanlist一起用的问题稳定实践

point

1. 滚动到底部，不请求分页数据？查看是否正确设置 finished 值
2. 正确设置 finished 值，请求分页也失常，但还是会呈现刚加载页面的时候屡次调用 van-list 的load办法，申请完了所有数据？设置 :immediate-check="false" 就ok

实际与讲解

// html
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    class="order-list"
    v-model="loading"
    :finished="finished"
    <--- 这个能够解决正确设置 finished 后还是会一次性申请完所有数据的问题 --->
    :immediate-check="false"
    finished-text="没有更多了"
    @load="onLoad"

<--- 这个是我本人封装的自定义组件 --->
    <order-card
      v-for="item in records"
      :key="item.id + item.no"
      :record="item"
      @click.native="goTo(item)"
    ></order-card>
  </van-list>
</van-pull-refresh>
// js
created() {this.onLoad(); // 因为设置了 immediate-check="false" 所以加载完页面后要手动调用第一次的 onLoad 办法
},
onRefresh() {
  // 清空列表数据
  this.finished = false;
  // 重置分页
  this.pageParams.pageNo = 0;
  this.pageParams.pageSize = 10;
  // 重置列表
  this.records = [];

  // 从新加载数据
  // 将 loading 设置为 true，示意处于加载状态
  this.loading = true;
  this.onLoad();},
async onLoad() {if (this.refreshing) {this.refreshing = false;}

  this.pageParams.pageNo++;
  await this.queryTaskOrderList();

  this.loading = false;
},
async queryTaskOrderList() {
  try {
    const params = {...this.pageParams,};
    const apiName = "nptTaskPageByCurrentUser";
    const {data: { records, total},
    } = await api.req(params, apiName);
    this.records = this.records.concat(records); // 这里要扭转 list
    this.finished = this.records.length >= total // 就是这里！当申请完所有数据的时候才设置 finished 为 true，否则为 false
  } catch (error) {console.log("获取工作工单列表失败", error);
    this.finished = true // 还有这里！出错的时候要设置为 true，不然也会始终申请
  }
},