移动端上拉加载和下拉刷新的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 条评论
登录 后参与评论

相关文章

来自专栏小白鼠

Ionic3 高德Web定位

高德提供了Web平台定位的JS API,同样需要用到 APP_Key,并且需要注意是使用Web端的Key,如下图所示。必须是Web端的,其它平台的无效。 ht...

1562
来自专栏数据小魔方

图表搬家

来这里找志同道合的小伙伴! 今天给大家聊一聊Excel图表的输出! 我们日常所做的图表,如果不是专门用做Excel报表的话,大部分还是要以图片的形式导出。 通...

3338
来自专栏小程序·云开发专栏

解剖小程序的 setData

原文链接:https://godbasin.github.io/2018/10/05/wxapp-set-data/

1.4K3
来自专栏FD的专栏

React 中引入 Angular 组件

为了在我的编辑器中使用 Angular,我用 Angular 编写了一个重命名功能。而为了使用它,我得再次使用一次 customEvent,而在这个微前端架构的...

1013
来自专栏美丽应用

安卓Chrome使用技巧合辑

4K3
来自专栏速成应用小程序开发平台

新手教程|速成应用教你如何制作搭建自己的微信小程序

微信小程序已经迈入了爆发阶段,很多中小企业和商户正在不断涌入这个市场。但是很多不懂技术不懂代码的小白却不知道去哪里制作微信小程序,现在就以可视化小程序开发工具「...

1.9K5
来自专栏编程

Python2下载单张图片和爬取网页图片

昨天用Python2爬取了一首歌的热评和评论总数,今天用Python2来下载图片。 一、需求分析 1、知道图片的url地址,将图片下载到本地。 2、知道网页地址...

2439
来自专栏前端新视界

jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)

前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功...

3289
来自专栏我就是马云飞

这才是真正的万能圆角ImageView

不知道有没有人记得我去年写过一个圆角的imageview。不知道的可以先去看看:万能圆角imagview,本文是基于上一篇的内容进行添加以及修改的。不然直接看这...

3179
来自专栏知晓程序

想在小程序中快速部署富文本?这个插件让你一步搞定

2053

扫码关注云+社区

领取腾讯云代金券