vant组件库中list列表的使用（PullRefresh、van-list、van-empty结合使用）

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-empty description="暂无数据" v-show="emptyShow"/>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text=""
        @load="onLoad"
      >
        <div class="item" 
        v-for="(item,index) in list" 
        :key="index" 
        @click="toDetail(item)"
        >{{item.name}}</div>
      </van-list>
    </van-pull-refresh>

  data() {
    return {
      // 分页参数
      SearchParams: {
        size: 10,
        page: 1,
        total: 0
      },
      // list列表
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
      //空状态
      emptyShow: false,
    }
  },

  onLoad() {
    if (this.refreshing) {
      this.list = [];
      this.refreshing = false;
    }
    const params = new FormData()
    params.append('currentPage', this.SearchParams.page)
    params.append('pageSize', this.SearchParams.size)
    listQuery(params).then(res => {
      this.SearchParams.page++
      this.list = this.list.concat(res.data.data)
      if (this.list.length == 0) {//判断是否有数据，显示空状态样式
        this.emptyShow = true;
      } else {
        this.emptyShow = false;
      }
      this.SearchParams.total = res.data.count
      this.loading = false;
      if (this.list.length >= this.SearchParams.total) {
        this.finished = true;//停止加载
      }
    })
  },
  onRefresh() {
    // 清空列表数据
    this.finished = false;
    this.SearchParams.page = 1
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    this.loading = true;
    this.onLoad();
  },