vue插件mescroll.js实现移动端上拉加载和下拉刷新

npm install --save mescroll.js //不要使用cnpm安装

import MescrollVue from ‘mescroll.js/mescroll.vue'

components: {  MescrollVue // 注册mescroll组件},

<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" class="scrollView"></mescroll-vue>

data () { return {  mescroll: null, // mescroll实例对象  mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)  mescrollUp: { // 上拉加载的配置.    callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }    //以下是一些常用的配置,当然不写也可以的.    page: {      num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始      size: 10 //每页数据条数,默认10    },    noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看    toTop: {      //回到顶部按钮      src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图      offset: 1000 //列表滚动1000px才显示回到顶部按钮    },    htmlContent: '<p class="downwarp-progress"></p><p class="downwarp-tip">下拉刷新 </p>', //布局内容    empty: {      //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示      warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)      icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图      tip: "暂无相关数据~" //提示    }  },  articleList: [] // 列表数据 }},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()},methods: { mescrollInit(mescroll) {   this.mescroll = mescroll; }, upCallback(page, mescroll) {  this.$Request({    url: "",    method: "get",    data: {     page: page.num    },    success: res => {     if (res.status == 1) {      let data = page.num == 1 ? [] : this.articleList;      data.push(...res.result.data);      this.articleList = data;      // 数据渲染成功后,隐藏下拉刷新的状态      this.$nextTick(() => {       mescroll.endSuccess(res.result.data.length);      });     }    }  }); } }}

.mescroll {  position: fixed;  padding-bottom: 1rem;  top: 2px;  bottom: 0;  height: auto;}

htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', //上拉加载中的布局htmlNodata: '<p class="upwarp-nodata">-- END --</p>', //无数据的布局

-webkit-overflow-scrolling:touch;