vue使用vant下拉刷新和上拉加载

<template>
  <div>
    <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        :offset="offset"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id" :title="item.msgContent" style="height:90px" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { selectMsgByCondition } from "@/api/login";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      rows: 10,
      msgStatus: "",
      offset: 100
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //上拉执行事件
    onLoad() {
      this.selectMsgByCondition();
    },
    /**
     * List 组件通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。
     * 此时可以发起异步操作并更新数据，数据更新完毕后， 将loading设置成false即可。
     * 若数据已全部加载完毕，则直接将finished设置成true即可。
     */
    selectMsgByCondition() {
      let obj = { page: this.page, rows: this.rows, msgStatus: this.msgStatus };
      selectMsgByCondition(obj).then(res => {
        //如果是第一次进入页面page==1 直接复制
        if (this.page == 1) {
          this.list = res.data.records;
        } else {
          //如果不是则在后面追加数据
          res.data.records.forEach(item => {
            this.list.push(item);
          });
          //追加完成后关闭loading
          this.loading = false;
        }
        //当还有数据是page++
        if (this.page < res.data.pages) {
          this.page++;
          this.loading = false;
        } else {
          //如果没有数据加载完毕
          this.finished = true;
        }
      });
    },
    //下拉刷新
    onRefresh() {
      // 清空列表数据
      this.page = 1;
      this.selectMsgByCondition();
      this.refreshing = false;
    }
  }
};
</script>