vue插件mescroll.js实现移动端上拉加载和下拉刷新
做⼀个简单的移动端展⽰项⽬，后台分页后前端加载，实现上拉加载下⼀页，了下，还是⽤这个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.$scroll.beforeRouteEnter() // 进⼊路由时，滚动到原来的列表位置，恢复回到顶部按钮和isBounce的配置
})
},
beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce，则beforeRouteLeave不⽤写
this.$scroll.beforeRouteLeave() // 退出路由时，记录列表滚动的位置，隐藏回到顶部按钮和isBounce的配置
next()
},
methods: {
mescrollInit(mescroll) {
},
vuejs流程图插件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(...sult.data);
this.articleList = data;
// 数据渲染成功后，隐藏下拉刷新的状态
this.$nextTick(() => {
});
}
}
});
}
}
}
3.style样式
.mescroll {
position: fixed;
padding-bottom: 1rem;
top: 2px;
bottom: 0;
height: auto;
}
具体的配置可以参考：
4.加载完成后
可以在data中的mescrollUp项中进⾏底部没有更多数据时的提⽰信息,'END'及'加载中...'这些内容可以⾃⼰设置
htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', //上拉加载中的布局
htmlNodata: '<p class="upwarp-nodata">-- END --</p>', //⽆数据的布局
可以查看源码进⾏设置:
5.scroll属性在ios⼿机上回出现卡顿问题
在进⾏滚动的这个容器样式中添加这个属性：
-webkit-overflow-scrolling:touch;
但是的话，填加了这个兼容会导致定位为position：fixed的失去效果，看了⼀些资料，使⽤position：absolute可以解决，这个我没有具体的再去实验下，若有好的⽅法，还请⼤家能够在评论⾥告知下，感激不尽
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。