vue插件mescroll.js实现移动端上拉加载和下拉刷新

2023-08-27 02:18:04 148

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

1.npm安装

npminstall--savemescroll.js//不要使用cnpm安装

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

importMescrollVuefrom‘mescroll.js/mescroll.vue'

注册组件：

components:{
MescrollVue//注册mescroll组件
},

template使用

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:'
下拉刷新',//布局内容
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){
letdata=page.num==1?[]:this.articleList;
data.push(...res.result.data);
this.articleList=data;
//数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(()=>{
mescroll.endSuccess(res.result.data.length);
});
}
}
});
}
}
}

3.style样式

.mescroll{
position:fixed;
padding-bottom:1rem;
top:2px;
bottom:0;
height:auto;
}

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

4.加载完成后

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

htmlLoading:'
加载中..',//上拉加载中的布局
htmlNodata:'--END--
',//无数据的布局

可以查看源码进行设置:mescroll源码（GitHub）

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

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

-webkit-overflow-scrolling:touch;

但是的话，填加了这个兼容会导致定位为position：fixed的失去效果，看了一些资料，使用position：absolute可以解决，这个我没有具体的再去实验下，若有好的方法，还请大家能够在评论里告知下，感激不尽

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

vue插件mescroll.js实现移动端上拉加载和下拉刷新

热门推荐

随机推荐