vant-ui ：van-list 结合 van-pull-refresh 实现瀑布流分页

在写 手机app 的 h5 页面时，遇到了分页的需求，和 pc 端不同，手机端的分页是 瀑布流式，滑动到页面最底部后自动加载下一页数据，一直滑动到数据全部加载完毕后，页面底部显示 '没有数据了'。同时支持滑动到页面顶部，下拉刷新，刷新后只显示第一页的数据。代码如下：

  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
     <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="nextPage"
      >
         <ul class="check-list-ul">
           <li v-for="item in checkList" :key="item.id" class="check-list-li">
             // 此处展示列表数据
           </li>
         </ul>
      </van-list>
   </van-pull-refresh>

    data() {
      return {
        currentPage: 0, // 当前页码
        pageSize: 10, // 每页个数
        totalSize: 10, // 总个数
        loading: false, // 加载下一页
        finished: false, // 是否加载完了
        refreshing: false,
        checkList : [] // 列表数据
      }
    },
 
    mounted() {
      this.onRefresh() // 刚进入页面加载第一页
    },

    methods: {
        nextPage() { // 加载下一页
          this.loading = false
          this.currentPage += 1
          this.getData()
        },

        onRefresh() { // 下拉刷新
          this.currentPage = 1
          this.checkList = []
          this.finished = false
          this.refreshing = true
          this.loading = true
          this.getData()
        },

        getData() {
           this.loading = true
           const param = {
             current: this.currentPage,
             size: this.pageSize,
           }
         
           postAction('xxx', param).then(res => {
              this.loading = false
              if (res.code === 200) {
                   // 如果下拉刷新，那么数据清空重新获取第一页
                  if (this.refreshing) {
                    this.checkList = []
                    this.refreshing = false
                  }

                  this.totalSize = res.result.total
                  res.result.records.forEach(item => {
                     this.checkList.push(item)
                  })

                   // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
                      currentPage 重置为 1
                   if (this.checkList.length >= this.totalSize) {
                     this.finished = true
                     this.currentPage = 1
                   }
              }
           })
        }
    }