移动端上拉加载和下拉刷新的vue插件

MescrollVue // 注册mescroll组件

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: "暂无相关数据~" //提示

    }

  vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置

 this.mescroll = 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);

       });

     }

   }

});

position: fixed;

padding-bottom: 1rem;

top: 2px;

bottom: 0;

height: auto;