vue 使用vant-ui 的 List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果，上划加载更多

vue 使用vant-ui 的 List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果，上划加载更多

1.列表页面布局，红色为外层样式设置

{
height: 100%;
overflow-y: auto;
}

2.绿色为需要加载的列表项

  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="administrative-guidance-list"
        v-for="item in dataList"
        :key="item.id"
        @click="jumpDetails(item.id)"
      >
        <div>{{item}}</div>
      </div>
    </van-list>
  </van-pull-refresh>

  data() {
    return {
      dataList: [],
      loading: false,
      finished: false,
      refreshing: false,
      num: 1, //用来记录页码 从第一页开始
    };
  },

  methods: {
    onLoad() {
      if (this.refreshing) {
        this.dataList = [];
        this.refreshing = false;
        this.num = 1;
      }
      //接口本身是支持传页面实现下一页的功能，所以每次请求成功，只需要更改 num 这个页码就可以
      this.$_http("接口名字", {
        data: {
          pageSize: 10,
          pageNum: this.num,
        },
      }).then((res) => {
        console.log(res);
         if (res.list.length > 0 && res.totalPage >= this.num) {
          this.num++;
          this.dataList.push(...res.list);
          this.loading = false;
          if (this.dataList.length >= res.totalCount) {
            this.finished = true;
          }
        } else {
          this.finished = true;
        }
      });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
}