vant ui 上拉加载下 拉刷新踩坑记

直接上代码
template

<template>
	<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
	   <van-list
	     v-model="loading"
	     :finished="finished"
	     :offset="1"
	     finished-text="没有更多了"
	     @load="onLoad"
	     :immediate-check="false"
	     class="cansee"
	   >
	     <card
	       v-for="item in list"
	       :id="item.id"
	       :key="item.id"
	       :title="item.title"
	       :time="item.pushTime"
	       :content="item.subTitle"
	     />
	   </van-list>
	 </van-pull-refresh>
 </template>
 <script>
data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      pageIndex: 1,
      carpageTotal: 1
    };
  },
  methods:{
  getPageList(pageIndex) {
      const that = this;
      that.list = [];
      const pageSize = 10;
      $.ajax({
        type: "get",
        url:
          that.$config.baseURL +
          `/schNotice/appNotice/schList/${pageIndex}/${pageSize}`,
        success: function(res) {
          if (res.code == 0) {
            that.loading = false;
            if (res.result.list.length > 0) {
              that.refreshing = false;
              that.list = res.result.list;
            } else {
              that.refreshing = false;
              that.list = [];
            }
          } else {
            that.loading = false;
          }
        }
      });
    },
	onRefresh() {
      this.pageIndex = 1;
      this.finished = false;
      this.refreshing = true;
      this.getPageList(1);
    },
	onLoad() {
      const that = this;
      that.loading = true;
      that.pageIndex = that.pageIndex + 1;
      $.ajax({
        type: "get",
        url:
          that.$config.baseURL +
          `/schNotice/appNotice/schList/${that.pageIndex}/10`,
        success: function(res) {
          if (res.code == 0) {
            that.loading = false;
            if (res.result.list.length < 10) {
              that.finished = true;
            }
            if (res.result.list.length === 0) {
              that.loading = false;
              that.finished = true;
            }
            //判断当前返回数据的pageIndex 是否和当前的pageIndex相等，相等就把之前的数据和当前返回的数据合并（避免数据重复）
            if (res.result.pagination.pageIndex == that.pageIndex) {
              that.list = that.list.concat(res.result.list);
            }
          } else {
            that.loading = false;
            that.finished = true;
          }
        }
      });
    },

  },
  mounted(){
	this.getPageList(1)
  }
  
</script>

用过vant的小伙伴应该知道，初始化的时候会发现掉用啦两次接口，当然官网说的很清楚，需要在vant-list上设置:immediate-check=“false”，然后在mounted的时候自己手动调用接口，这样就避免啦连续调用的问题啦