做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescroll.js插件好一点

1.npm安装



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

导入(在哪个页面使用,则在哪个页面导入(这里的话，我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入))：



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

注册组件：



components: {

    MescrollVue // 注册mescroll组件

},

template使用



&lt;mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" class="scrollView"&gt;&lt;/mescroll-vue&gt;

2.data里进行相关配置



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: '&lt;p class="downwarp-progress"&gt;&lt;/p&gt;&lt;p class="downwarp-tip"&gt;下拉刷新 &lt;/p&gt;', //布局内容

        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 =&gt; {

      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 =&gt; {

         if (res.status == 1) {

           let data = page.num == 1 ? [] : this.articleList;

           data.push(...res.result.data);

           this.articleList = data;

           // 数据渲染成功后,隐藏下拉刷新的状态

           this.$nextTick(() =&gt; {

              mescroll.endSuccess(res.result.data.length);

           });

         }

       }

    });

  }

 }

}

3.style样式



style

.mescroll {

    position: fixed;

    padding-bottom: 1rem;

    top: 2px;

    bottom: 0;

    height: auto;

}

具体的配置可以参考：mescroll配置

4.加载完成后

可以在data中的mescrollUp项中进行底部没有更多数据时的提示信息,'END'及'加载中...'这些内容可以自己设置



htmlLoading: '&lt;p class="upwarp-progress mescroll-rotate"&gt;&lt;/p&gt;&lt;p class="upwarp-tip"&gt;加载中..&lt;/p&gt;', //上拉加载中的布局

htmlNodata: '&lt;p class="upwarp-nodata"&gt;-- END --&lt;/p&gt;', //无数据的布局

可以查看源码进行设置: mescroll源码（GitHub）

5.scroll属性在ios手机上回出现卡顿问题

在进行滚动的这个容器样式中添加这个属性：



-webkit-overflow-scrolling:touch;

但是的话，填加了这个兼容会导致定位为position：fixed的失去效果，看了一些资料，使用position：absolute可以解决，这个我没有具体的再去实验下，若有好的方法，还请大家能够在评论里告知下，感激不尽

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：

来源：https://segmentfault.com/a/1190000016400608

巴特西

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

1.npm安装

2.data里进行相关配置

3.style样式

4.加载完成后

5.scroll属性在ios手机上回出现卡顿问题

最新文章

热门文章