移动端MescrollVue上下刷新

<template>

<div>

<mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">

<div class="events-content">
事件内容 

</div>

</mescroll-vue>

</div>

</template>

data () {
  return {
    mescroll: null, // mescroll实例对象
    mescrollUp: { // 上拉加载的配置.
      callback: this.upCallback,
      isBoth: true,
      dataList: [] // 列表数据
    },
    cnt: 10,
    page: 1,
    eventData: []
  }
},

methods:

// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit (mescroll) {
  this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
},
upCallback (page, mescroll) {
  // page = {num:1, size:10}
  // console.log(111, page)
  let vm = this
  this.page = page.num
  this.$http.post(this.base + 'queryevent?token=' + this.$store.getters.get_token,
    {dids: [], cnt: parseInt(this.cnt), page: parseInt(this.page)}).then(res => {
    console.log('事件', res)
    if (res.data.code === 200) {
      // if (res.data.data.length === 0) {
      //   return
      // }
      if (this.page === 1) {
        this.eventData = res.data.data
      } else {
        this.eventData = this.eventData.concat(res.data.data)
      }
    }
    this.$nextTick(() => {
      setTimeout(() => {
        vm.mescroll.endSuccess(this.eventData.length)
      }, 100)
    })
  }).catch(err => {
    console.log(err)
    this.mescroll.endErr()
  })
}

<style scoped>

.mescroll {
  position: fixed;
  top: 22px;
  bottom: 140px;
  /*font-size: 30px;*/
  height: auto;
}

.events-content{
  height: 100%;
  width: 100%;
}