前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >移动端上拉加载和下拉刷新的vue插件

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

原创
作者头像
一墨编程学习
发布2018-10-22 19:05:16
4.8K0
发布2018-10-22 19:05:16
举报
文章被收录于专栏:程序员的知识天地

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

1.npm安装

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

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

代码语言:txt
复制

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

代码语言:txt
复制

注册组件:

代码语言:txt
复制

components: {

代码语言:txt
复制
MescrollVue // 注册mescroll组件

},

代码语言:txt
复制

template使用

代码语言:txt
复制

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

代码语言:txt
复制

2.data里进行相关配置

代码语言:txt
复制

data () {

return {

代码语言:txt
复制
mescroll: null, // mescroll实例对象
代码语言:txt
复制
mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
代码语言:txt
复制
mescrollUp: { // 上拉加载的配置.
代码语言:txt
复制
    callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
代码语言:txt
复制
    //以下是一些常用的配置,当然不写也可以的.
代码语言:txt
复制
    page: {
代码语言:txt
复制
       num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
代码语言:txt
复制
       size: 10 //每页数据条数,默认10
代码语言:txt
复制
    },
代码语言:txt
复制
    noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
代码语言:txt
复制
    toTop: {
代码语言:txt
复制
        //回到顶部按钮
代码语言:txt
复制
        src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
代码语言:txt
复制
        offset: 1000 //列表滚动1000px才显示回到顶部按钮
代码语言:txt
复制
    },
代码语言:txt
复制
    htmlContent: '<p class="downwarp-progress"></p><p class="downwarp-tip">下拉刷新 </p>', //布局内容
代码语言:txt
复制
    empty: {
代码语言:txt
复制
       //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
代码语言:txt
复制
       warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
代码语言:txt
复制
       icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
代码语言:txt
复制
       tip: "暂无相关数据~" //提示
代码语言:txt
复制
    }

},

articleList: [] // 列表数据

}

},

beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写

next(vm => {

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

})

},

beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写

this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置

next()

},

methods: {

mescrollInit(mescroll) {

代码语言:txt
复制
 this.mescroll = mescroll;

},

upCallback(page, mescroll) {

代码语言:txt
复制
this.$Request({
代码语言:txt
复制
   url: "",
代码语言:txt
复制
   method: "get",
代码语言:txt
复制
   data: {
代码语言:txt
复制
     page: page.num
代码语言:txt
复制
   },
代码语言:txt
复制
   success: res => {
代码语言:txt
复制
     if (res.status == 1) {
代码语言:txt
复制
       let data = page.num == 1 ? [] : this.articleList;
代码语言:txt
复制
       data.push(...res.result.data);
代码语言:txt
复制
       this.articleList = data;
代码语言:txt
复制
       // 数据渲染成功后,隐藏下拉刷新的状态
代码语言:txt
复制
       this.$nextTick(() => {
代码语言:txt
复制
          mescroll.endSuccess(res.result.data.length);
代码语言:txt
复制
       });
代码语言:txt
复制
     }
代码语言:txt
复制
   }
代码语言:txt
复制
});

}

}

}

代码语言:txt
复制

3.style样式

代码语言:txt
复制

style

.mescroll {

代码语言:txt
复制
position: fixed;
代码语言:txt
复制
padding-bottom: 1rem;
代码语言:txt
复制
top: 2px;
代码语言:txt
复制
bottom: 0;
代码语言:txt
复制
height: auto;

}

代码语言:txt
复制

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

4.加载完成后

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

代码语言:txt
复制

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

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

代码语言:txt
复制

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

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

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

代码语言:txt
复制

-webkit-overflow-scrolling:touch;

代码语言:txt
复制

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

这里推荐一下我的前端学习交流群:784783012,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档