使用 Vue 的 Vant List列表组件实现无限下拉

<template>
  <div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
      <div v-for="(item, index) in list" :key="index" class="waitingList"></div>
    </van-list>
  </div>
</template>

<script>
export default {
  name: 'WaitingList',
  data() {
    return {
      loading: false,
      finished: false,
      pageNo: 1,
      pageLimit: 10,
      totalCount: 0,
      list: [],
      isLoading: false
    }
  },
  created() {
    console.log(this.datas)
    this.getList()

    this.currentUser = window.localStorage.userId
    console.log(window.localStorage.userId)
  },
  methods: {
    onLoad() {
      // debugger
      this.pageNo++
      this.getList()
    },
    getList() {
      let form = {
        timeStatus: this.currentIndex,
        billCode: this.billCode,
        status: this.datas,
        pageNo: this.pageNo,
        pageLimit: this.pageLimit
      }
      this.$api.inspection.inspectionList(form).then(res => {
        if (res.code === '0') {
          let list = res.data.list
          this.totalCount = res.data.paginator.totalCount
          this.loading = false //是否处于加载状态，加载过程中不触发load事件
          if (list == null || list.length === 0) {
            this.finished = true // 加载结束
            return
          }
          this.$nextTick(() => {
            this.list = this.list.concat(list)
          })
        }
      })
    },
    onRefresh() {
      this.list = []
      this.pageNo = 1
      this.getList()
      this.$toast('刷新成功')
      this.isLoading = false
    }
  }
}
</script>