vue vant上拉加载下拉刷新最佳实践

List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果。

<div class='list'>
        <van-empty v-if="list.length === 0" description="暂无明细" />
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div v-for="(item,index) in list" :key="index" class='list_card flex-row items-center '>
              ...
            </div>
          </van-list>
        </van-pull-refresh>
      </div>

export default {
  name: 'Detailed',
  components: {},
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      pageNum: 1,
      pageSize: 10,
    }
  },
  methods: {
  //...
    onLoad() {
      getInfo({
        dateTime: this.firstTime,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code === 200) {
          const { records, total } = res.data
          if (this.refreshing) {
            this.list = []
            this.refreshing = false
          }
          this.list = [...this.list, ...records]
          this.loading = false
          if (this.list.length >= total) {
            this.finished = true
          }
        }
      })
      this.pageNum++
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false
      this.pageNum = 1
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    }
  }
}
</script>