关于van-pull-refresh与van-list一起用的问题（稳定实践）

point

1. 滚动到底部，不请求分页数据？查看是否正确设置finished值
2. 正确设置finished值，请求分页也正常，但还是会出现刚加载页面的时候多次调用van-list的load方法，请求完了所有数据？设置:immediate-check="false"就ok
3. 以上都设置了，但还是一次性加载完所有数据？看下外层容器是不是设置了overflow-y: auto;，去掉就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，不然也会一直请求
  }
},