移动端上拉加载和下拉刷新的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前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
