美文网首页前端学习
移动端上拉加载和下拉刷新的vue插件

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

作者: 1194b60087a9 | 来源:发表于2019-04-24 15:48 被阅读0次

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

    1.npm安装

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

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

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

    注册组件:

    components: {

      MescrollVue // 注册mescroll组件

    },

    template使用

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

    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: '<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);

              });

            }

          }

      });

    }

    }

    }

    3.style样式

    style

    .mescroll {

      position: fixed;

      padding-bottom: 1rem;

      top: 2px;

      bottom: 0;

      height: auto;

    }

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

    4.加载完成后

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

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

    htmlNodata: '<p class="upwarp-nodata">-- END --</p>', //无数据的布局

    可以查看源码进行设置:mescroll源码(GitHub)

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

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

    -webkit-overflow-scrolling:touch;

    填加了这个兼容会导致定位为position:fixed的失去效果,使用position:absolute可以解决

    十五年编程经验,今年1月整理了一批2019年最新WEB前端教学视频,不论是零基础想要学习前端还是学完在工作想要提升自己,这些资料都会给你带来帮助,从HTML到各种框架,帮助所有想要学好前端的同学,学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流Q群:296212562,即可免费获取。

    相关文章

      网友评论

        本文标题:移动端上拉加载和下拉刷新的vue插件

        本文链接:https://www.haomeiwen.com/subject/cbpggqtx.html