好资源导航 » 文章资讯 » 基于Vue框架vux组件库实现上拉刷新功能

基于Vue框架vux组件库实现上拉刷新功能

2023-09-20 09:48:06 57

最近公司在研发app,选择了基于Vue框架的vux组件库，现总结在实现上拉刷新功能遇到的坑：
1.问题：只刷新一次，解决方法：需要自己手动重置状态
this.scrollerStatus.pullupStatus=‘default'，
2.问题：不能滚动，解决方法：因为启用keep-alive缓存，需要设置

activated(){
this.$refs.scroller.reset()
}

如果还没效果，请在获取后台数据后，执行如下代码

this.$nxtTick(()=>{
this.$refs.scroller.reset()
})

贴出整个页面的代码。




.weui-form-preview__value{
font-size:1.1em!important;
color:black;
}
.spanMeetTitle{
float:left;
border-radius:13px;
padding:10px6px;
font-size:15px;
font-weight:bold;
margin-left:3px;
color:black;
}
.spanMeetStatu{
float:right;
background-color:green;
border-radius:10px;
padding:6px5px;
color:white;
font-size:13px;
margin-top:5px;
}
.flex-demo{
height:30px;padding-top:5px;
}
.selected{
color:blue!important;
background-color:transparent;
}
.popup0{
padding-bottom:15px;
height:200px;
}
.popup1{
width:100%;
height:100%;
}
.popup2{
padding-bottom:15px;
height:400px;
}
.box1{
height:100px;
position:relative;
width:1490px;
}
.box1-item{
width:200px;
height:100px;
background-color:#ccc;
display:inline-block;
margin-left:15px;
float:left;
text-align:center;
line-height:100px;
}
.box1-item:first-child{
margin-left:0;
}
.box2-wrap{
height:300px;
overflow:hidden;
}





@import'~vux/src/styles/1px.less';

.flex-demo{
text-align:center;
color:#fff;
background-color:#20b907;
border-radius:4px;
background-clip:padding-box;
}

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

基于Vue框架vux组件库实现上拉刷新功能

热门推荐

随机推荐