mescroll.js 上拉刷新 下拉加载

1.安装 mescroll

npm install --save mescroll.js //不要使用cnpm安装
//引入刷新列表组件
import MescrollVue from ‘mescroll.js/mescroll.vue’

2.在template中设置需要刷新的组件

<mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
	需要刷新的列表
mescroll-vue>

3.在data中设置

mescroll: null,
mescrollUp: {
  callback: this.loadMoreDataCallback,
  page: {
    num: 0, //当前页，默认从0开始,在开始回调之前会加1; 即callback(page)会从1开始
    size: 10 //每页数据条数,默认10
  },
  htmlNodata: '
没有更多数据了
',
  noMoreSize: 2, //如果列表已无数据,可设置列表总数大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
},

4. 在methods中设置

// 必须设置
  mescrollInit(mescroll) {
    this.mescroll = mescroll;  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
  },
  beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
    })
  },
  beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
    this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
    next()
  },

5.请求方法，也是在methods中设置

// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
loadMoreDataCallback(page, mescroll) {
  // 获取访客列表
  // 记得写page.num ， page.size 页码
  AdminProductManagerRequestManager.getVisitorData('', this.search, AdminProductManagerRequestManager.getSortEvent(this.SortData), this.aim, page.num, page.size, (data, status, info) => {

    if (data.length > 0) {
      console.log(this.clientData);
	// 下面写死的
      if (page.num == 1) this.clientData = [];

      // 刷新数据
      this.clientData = this.clientData.concat(data);

      // 数据渲染成功后,隐藏下拉刷新的状态
      this.$nextTick(() => {
        mescroll.endSuccess(data.length);
      });
    } else {
      // 没有数据后,隐藏下拉刷新的状态
      this.$nextTick(() => {
        mescroll.endSuccess(0);
      });
    }
  });
},
-------------------------如果需要调用重新获取数据就用这个--------------------------------------
 // 刷新数据
 this.mescroll.resetUpScroll()

6.避免滑动不灵 设置css！！！！

-webkit-overflow-scrolling:touch;
.mescroll {
      padding-top: 105px;
      position: fixed;
      padding-bottom: 1rem;
      top: 2px;
      bottom: 0;
      height: auto;
    }

7. 完结，撒花~