上拉加载下拉加载

<section>
      <div ref="mescroll" class="mescroll">
        <div>
          <div class="panel" v-for="(item,index) in allList" :key="index" @touchstart="isMoveFlag=true" @touchend="isMoveFlag=false">
            <div class="content-hd">
              <div class="fl"><img src="@/images/avatar2.png">{{item.createBy}}</div>
              <div class="fr">{{item.createTime | time('yyyy-MM-dd HH:mm:ss')}}</div>
            </div>
            <div class="content-bd">
              <div class="caption">{{item.noticeName}}</div>
              <p v-html="item.noticeContent"></p>
            </div>
            <div class="content-ft lc-rt-arrow" @click="!isMoveFlag && $router.push({path: '/NoticeList/Detail',query:{detial: item}})">
              <div class="fl">查看详情</div>
            </div>
          </div>
        </div>
      </div>
    </section>


methods:{
// 获取列表
    upCallback (page) {
      this.query.sendStatus = 1
      this.query.pageNum = page.num
      this.$classAjax.get(this.$URL.classNoticeSendList, this.query).then(res => {
        this.allList = this.allList.concat(res.records)
        this.mescroll.endSuccess(res.total, res.total <= res.size * res.pages)
      })
    },
initMescroll () {
      this.mescroll = new this.$MeScroll(this.$refs.mescroll, { // 在vue的mounted生命周期初始化mescroll,确保此处配置的ref有值
        down: {
          auto: false,
          isLock: true
        },
        up: {
          auto: true,
          callback: this.upCallback,
          isBounce: false,
          // 以下是一些常用的配置,当然不写也可以的.
          page: {
            num: 0, // 当前页 默认0,回调之前会加1; 即callback(page)会从1开始
            size: 10, // 每页数据条数
            time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
          },
          loadFull: {
            use: false, // 列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或者无更多数据为止;默认false,因为可通过调高page.size避免这个情况
            delay: 500 // 延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
          },
          htmlNodata: '<p class="upwarp-nodata">亲,没有更多数据了~</p>',
          noMoreSize: 5 // 如果列表已无数据,可设置列表总数大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        }
      })
    }
}

//main.js
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
Vue.prototype.$MeScroll = MeScroll