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

前端之家收集整理的这篇文章主要介绍了基于Vue框架vux组件库实现上拉刷新功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

贴出整个页面代码

<div class="jb51code">
<pre class="brush:xhtml;">

<style type="text/css">
.weui-form-preview__value{
font-size: 1.1em !important;
color: black;
}
.spanMeetTitle{
float: left;
border-radius: 13px;
padding:10px 6px;
font-size: 15px;
font-weight: bold;
margin-left: 3px;
color: black;
}
.spanMeetStatu{
float: right;
background-color: green;
border-radius: 10px;
padding:6px 5px;
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;
}

<style lang="less">
@import '~vux/src/styles/1px.less';

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/34998.html

猜你在找的Vue相关文章