最近公司在研发程序,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑:
1.问题:只刷新一次,解决方法:需要自己手动重置状态
this.scrollerStatus。pullupStatus=拔ピ肌?
2 .问题:不能滚动,解决方法:因为启用点火电极缓存,需要设置
激活(){
refs.scroller.reset美元。()
}
之前
如果还没效果,请在获取后台数据后,执行如下代码
美元。nxtTick(()=比;｛
refs.scroller.reset美元。()
}）
之前
贴出整个页面的代码。
& lt; template>
& lt; div比;
& lt; x头槽=巴贰?left-options={showBack:假}“祝辞会议列表
& lt;一个槽=罢贰眝:点击=跋允?true”比;& lt;图标类型=八阉鳌弊４? lt;/icon>& lt;/button>& lt;/a>
& lt;/x-header>
& lt; !——会议列表——比;
& lt;照片卷轴v模型=" scrollerStatus "高度=" -46 " lock-x scrollbar-y ref=罢掌碇帷?反弹=癷sbounce”: use-pullup=敖曳ⅰ?pullup-config=皍pobj @on-pullup-loading”=皊elPullUp”比;
& lt; div类=癰ox2”比;
& lt; p v=傲斜怼绷斜?指数比;
& lt; router-link:="{路径:列表。id}”在
& lt; p比;
& lt;跨类=" spanMeetTitle " v-html='(指数+ 1)+”。“+ list.name祝辞& lt;/span>
& lt;跨类=" spanMeetStatu " v-html=' list.status祝辞& lt;/span>
& lt;/p>
& lt; p class=" prevSuper”比;
& lt; form-preview要点标签=" "头的值=":bodyItems=傲斜怼?footer-buttons=癰uttons1祝辞& lt;/form-preview>
& lt;/p>
& lt;/router-link>
& lt; hr>
& lt;/p>
& lt;/div>
& lt;/scroller>
& lt; !——导航——比;
& lt; Home> & lt;/Home>
& lt; !——搜索——比;
& lt;弹出v模型="显示" @on-hide=叭罩?“隐藏”)”@on-show="日志(显示)”高度=?3%”比;
& lt; div类=皃opup0”比;
& lt; group>
& lt;输入v模型=癿eetName”占位符=扒胧淙搿盎嵋槊啤八阉鳌弊４? lt;/x-input>
& lt; div祝辞& lt;图标类型=八阉鳌弊４? lt;/icon> & lt;/div>
& lt;/group>
& lt; !
& lt; group>
& lt;清单:max=1标题="会议审批状态”要求:选项=v模型“commonList”=癱heckStatus”@on-change=案谋洹弊４? lt;/checklist>
& lt;/group>——比;
& lt; group title=盎嵋樯笈刺北?
& lt;广播:选项=" commonList " v模型=癱heckStatus @on-change”=案谋洹弊４? lt;/radio>
& lt;/group>
& lt; group title=盎嵋槔嘈汀北?
& lt;选择器占位符="请选择会议类型“v模型=癱heckType”:选项=癿eetType祝辞& lt;/selector>
& lt;/group>
& lt; group title=罢倏奔洹氨?
& lt; flexbox>
& lt; flexbox-item>
& lt; div类=癴lex-demo”比;
& lt; datetime title=罢嘉环?"请选择“v模型=翱际奔洹备袷?" YYYY-MM-DD HH: mm“@on-change=案谋洹弊４? lt;/datetime>
& lt;/div>
& lt;/flexbox-item>
至
& lt; flexbox-item>
& lt; div类=癴lex-demo”比;
& lt; datetime title=罢嘉环?"请选择" v模型=" stopTime "格式=" YYYY-MM-DD HH: mm“@on-change=案谋洹弊４? lt;/datetime>
& lt;/div>
& lt;/flexbox-item>
& lt;/flexbox>
& lt;/group>
& lt; br>
& lt; flexbox东方=按怪薄北?
& lt; flexbox-item> & lt; div类=癴lex-demo”v:点击=跋钅俊痹谌范? lt;/div> & lt;/flexbox-item>
& lt; flexbox-item> & lt; div类=癴lex-demo”v:点击=跋允?false”祝辞取消& lt;/div> & lt;/flexbox-item>
& lt;/flexbox>
& lt;/div>
& lt;/popup>
& lt;面包v模型=" showToast "祝辞已加载全部数据& lt;/toast>
& lt;加载v模型=癷sShowLoading”:文本=皌extLoading祝辞& lt;/loading>
& lt;警报v模型=癷sShowAlert”: title=癆lertCongratulations”比;{{alertMessage}} & lt;/alert>
& lt;/div>
& lt;/template>
& lt;风格类型=" text/css "比;
.weui-form-preview__value {
字体大小:1.1 em !重要;
颜色:黑色;
}
.spanMeetTitle {
浮:左;
border - radius: 13 px;
填充:10 px 6 px;
字体大小:15 px;
粗细:大胆的;
margin-left: 3 px;
颜色:黑色;
}
.spanMeetStatu {
浮:正确;
背景颜色:绿色;
border - radius: 10 px;
填充:6 px 5 px;
颜色:白色;
字体大小:13 px;
margin-top: 5 px;
}
.flex-demo {
高度:30 px; padding-top: 5 px;
}
.selected {
颜色:蓝色!重要;
背景颜色:透明;
}
.popup0 {
padding-bottom: 15 px;
身高:200 px;
}
.popup1 {
宽度:100%;
高度:100%;
}
.popup2 {
padding-bottom: 15 px;
身高:400 px;
}
.box1 {
身高:100 px;
位置:相对;
宽度:1490 px;
}
.box1-item {
宽度:200 px;
身高:100 px;
background - color: # ccc;
显示:inline-block;
margin-left: 15 px;
浮:左;
text-align:中心;
行高:100 px;
}
.box1-item:第一个孩子{
margin-left: 0;
}
.box2-wrap {
身高:300 px;
溢出:隐藏;
}
& lt;/style>
& lt; script>
进口{XHeader、组FormPreview、Tabbar TabbarItem,照片卷轴,图标,弹出,XSwitch,吐司,XInput,检查表,Datetime, Flexbox, FlexboxItem,选择器,加载,警惕,电台}从“vux”
进口从“/Home。”
出口默认{
组件:{
XHeader,
家
组,
FormPreview,
Tabbar,
TabbarItem,
照片卷轴,
图标,
弹出,
XSwitch,
烤面包,
XInput,
检查表,
Datetime,
Flexbox,
FlexboxItem,
选择器,
加载,
警惕,
广播
},
数据(){
返回{
类型:' 1 ',
PageIndex: 0,
显示:假的,
showToast:假的,
showloading:假的,
揭发:没错,
isbounce:假的,
isShowAlert:假的,
AlertCongratulations:“条件有误”,
textloading:“加载中”,
alertMessage:“召开时间“不能大于“结束时间”,
价值:”,
meetName:”,
开始时间:”,
stopTime:”,
meetType: [],
commonList:[{关键:“20”,价值:“审批中”},{关键:“50”,价值:“审批通过'},{关键:“价值:“全部'}),
checkStatus:”,
checkType:”,
commonList2: [],
结果:[],
列表:[[]],
buttons1: [{
风格:“主”,
文本:“查看更多”,
链接:“/消息”
}]，
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
