h5結合vant框架，實現列表上拉加載下拉刷新

最近在做h5移動頁面開發，並且需要用移動端android和ios將h5嵌進去。在開發過程中，使用了vant這個框架；

vant文檔：https://youzan.github.io/vant/#/zh-CN/intro

該項目中根據後臺API拿到的數據包含分頁信息，

首先需要用到vant框架中的van-pull-refresh和van-list

    <!-- 列表組件&&分頁 -->
    <van-pull-refresh
      v-model="isDownLoading"
      @refresh="onDownRefresh"
      v-show="dtWinNumberInfos.length != 0"
    >
      <van-list
        v-model="isUpLoading"
        :finished="upFinished"
        :immediate-check="false"
        :offset="10"
        finished-text="加載完成"
        @load="onLoadList"
      >
        <div v-if="dtWinNumberInfos.length > 0" class="allcontent">
          <file-list :listData="dtWinNumberInfos" @getList="reloadPageList" />
        </div>
      </van-list>
    </van-pull-refresh>

在data中，需要聲明的變量是：

data() {
    return {
      pageSize: 30, // 每頁條數
      pageIndex: 1, // 頁碼
      dtWinNumberInfos: [], // 請求數據
      isDownLoading: false, // 下拉刷新
      isUpLoading: false, // 上拉加載
      upFinished: false, // 上拉加載完畢
      offset: 100 // 滾動條與底部距離小於 offset 時觸發load事件
    };
  },

//列表
    getArchiveList() {
      let params = {
        isTextBook: this.$route.name == "bookSync" ? "1" : "0",
        courseId: JSON.parse(localStorage.getItem("selSubject")).id,
        currentPage: this.pageIndex,
        pageSize: this.pageSize
      };
      api
        .getArchiveList(newParams)
        .then(res => {
          if (res.data.code != 0) {
            utils.mbToast(res.data.message);//彈框
            return;
          }
          let partList = res.data.data.items;
          //分頁處理
          let currentPage = res.data.data.currentPage;
          let totalPage = res.data.data.totalPage;
          if (partList == null || partList.length == 0) {
            //加載結束
            this.upFinished = true;
            return;
          }
          if (partList.length < this.pageSize) {
            //最後一個不足設定的頁面條數
            this.upFinished = true;
          }
          //處理數據
          if (this.pageIndex === 1) {
            this.dtWinNumberInfos = partList;
          } else {
            this.dtWinNumberInfos = this.dtWinNumberInfos.concat(partList);
          }
        })
        .catch(error => {
          utils.mbToast("獲取列表異常");
        })
        .finally(() => {
          this.isDownLoading = false;
          this.isUpLoading = false;
        });
    },
    onDownRefresh() {
      this.pageIndex = 1;
      this.upFinished = false; // 不寫這句會導致上拉到底過後在下拉刷新將不能觸發下拉加載事件
      this.getArchiveList(); // 加載數據
    },
    // 上拉加載請求方法
    onLoadList() {
      this.pageIndex++;
      this.getArchiveList(); // 加載數據
    },