专栏首页程序员的知识天地移动端上拉加载和下拉刷新的vue插件
原创

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

做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个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可以解决

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PythonGUI开发:59行代码开发小型商店添加系统

    python的GUI图形界面开发..这也是非常重要的一部分,如果你想要开发桌面应用程序的话,免不了需要了GUI编程的各种知识点,下面就来看看Python是如何开...

    一墨编程学习
  • Python玩转PDF各种骚操作大全!

    Portable Document Format(可移植文档格式),或者PDF是一种文件格式,可以用于跨操作系统的呈现和文档交换。尽管PDF最初是由Adobe发...

    一墨编程学习
  • python控制Windows电脑桌面壁纸,酷毙了!

    今天为大家介绍一个控制Windows电脑桌面壁纸的案例,具有很好的参考价值,是在电脑上的注册表做手脚,一直刷新桌面,可以做一个很好的桌面壁纸生成器

    一墨编程学习
  • 谷歌发布史上最详细的大脑扫描3D图像

    谷歌及其合作伙伴今天发布了有史以来规模最大、最详细的大脑扫描集。该项目涵盖了果蝇大脑的近三分之一,并包括了具有2000万个突触和超过25000个神经元的详细映射...

    AiTechYun
  • 前端基础-CSS细线表格

    cwl_java
  • LaTeX Math Symbols

    参考: http://web.ift.uib.no/Teori/KURS/WRK/TeX/symALL.html https://en.wikibooks....

    iOSDevLog
  • 最新IOSAPP下架原因汇总,找到源头

    对于移动应用开发者来说, 最令人沮丧的可能莫过于辛辛苦苦开发的应用, 没能通过苹果AppStore的审核,或者在应用更新时遭遇下架。苹果的AppStore的审核...

    所谓富贵
  • 通过欧拉计划学Rust编程:第100题

    由于研究Libra等数字货币编程技术的需要,学习了一段时间的Rust编程,一不小心刷题上瘾。

    申龙斌
  • 中国信通院发布:《区块链在金融领域的应用》

    在凤凰网WEMONEY、百度金融联合主办,互金通讯社协办的区块链沙龙上,中国信息通信研究院(工业和信息化部电信研究院)云计算与大数据研究所主任工程师、金融科技负...

    钱塘数据
  • Github 项目推荐 | 英特尔的深度学习扩展包 —— iDeep

    iDeep 是英特尔的深度学习扩展包,用于收集加速深度学习操作(如卷积,解卷积,relu 等)的模块。iDeep 使用英特尔 MKL-DNN 作为加速引擎。

    AI研习社

扫码关注云+社区

领取腾讯云代金券