vue项目中使用mescroll 插件来上拉加载更多滑动触发多次函数

在滑动的时候，每次触碰滑动的时候就会触发加载下一屏幕的函数 正确的应该是上一屏幕加载完毕后，下拉刷新的时候触发函数 （还有一个页面使用mescroll也有问题，只能下滑，不可以上滑）

这是函数

 this.$axios(
        this.httpInstitutionUrl + this.afterurl.institutionReferee,
        {
          id: this.params.id,
          page: page.num,
          search: this.params.search,
          filter: this.params.filter
        },
        'get'
      ).then((res) => {
       if (res.data.code == 0 && res.data.data.length != 0) {
          // this.refereeList = res.data.data.referee
          this.refCount = res.data.data.count
          localStorage.setItem('refCount', this.refCount)
          let data = page.num == 1 ? [] : this.refereeList
          data.push(...res.data.data.referee)
          this.refereeList = data
          this.$nextTick(() => {
            mescroll.endSuccess(res.data.data.length);
          })
        } else {
          // 没有数据隐藏下拉刷新
          mescroll.endSuccess(0)
        }

这是data的配置

 // mscroll数据
      mescrollRefree: null, // mescroll实例对象
      mescrollDownRefree: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUpRefree: { // 上拉加载的配置.
        callback: this.upCallbackRefree, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          id: ''
        },
        noMoreSize: 2,
        htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', //上拉加载中的布局
        htmlNodata: '<p class="upwarp-nodata">-- END --</p>', //无数据的布局
        isBounce: true,
        aoto: true,
      },

html结构

      <mescroll-vue ref="mescrollRefree" :down="mescrollDownRefree" :up="mescrollUpRefree" @init="mescrollInitRefree" class="scrollView">
        <div class="refree-all disFlex flex-wrap">
          <div class="item disFlex flexCenter flex-colum flex-pack-justify" v-for="(item,index) in refereeList" :key='index'>
            <div class="item-in">
              <div class="top"> <img :src='baseImgUrl + item.avator' alt=""></div>
              <!-- @click="displayRefreeCard" -->
              <div class="bottom size-box" @click="displayRefreeCard (item)">
                <p>{{ item.name}}</p>
                <p>{{ item.level }}</p>
              </div>
            </div>
          </div>
        </div>
      </mescroll-vue>

求大神们看看，整了好久