van-list实现页面下拉加载

<template>
  <h-container class="list">
    <!-- 列表数据 -->
    <div class="list_content" v-if="totalCount != 0">
      <list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <cell v-for="(item, index) in list" :key="index" :title="item.name" />
      </list>
    </div>
    <!-- 空页面 -->
    <h-empty :pic="kong" :text="text" v-else></h-empty>
  </h-container>
</template>

<script>
import HContainer from "./HContainer.vue";
import HEmpty from "./HEmpty.vue";
import { List, Cell } from "vant";
export default {
  name: "h-list",
  components: { HContainer, HEmpty, List, Cell },
  data() {
    return {
      list: [{ name: 1 }], //数据列表
      currentPage: 1, //当前页
      pageSize: 10, //每页条数
      totalCount: 0, //列表总条数
      loading: false,
      finished: false,
      text: "暂无数据",
      kong: require("@/assets/images/kong.png")
    };
  },
  methods: {
    // 下拉刷新
    onLoad() {
      this.GetAttendByTime();
    },
    // 获取list
    async GetAttendByTime() {
       //数据请求
      //   let params = {
      //     token: localStorage.getItem("token"),
      //     currentPage: this.currentPage,
      //     pageSize: this.pageSize
      //   };
      //   const [err, res] = await this.$http.getAttendByTime(params);
      if (err) return;
      this.total = res.data.totalCount;
      this.list = this.list.concat(res.data.list);
      //也可以使用展开运算符
      //this.list.push(...res.data.list)
      this.currentPage = this.currentPage + 1;
      // 加载状态结束
      this.loading = false;
      if (res.data.list.length < 10) {
        this.finished = true;
      }
    }
  }
};
</script>