|
最近公司在研发app,选择了基于Vue框架的vux组件库，现总结在实现上拉刷新功能遇到的坑：
1.问题：只刷新一次，解决方法：需要自己手动重置状态
this.scrollerStatus.pullupStatus = ‘default'，
2.问题：不能滚动，解决方法：因为启用keep-alive缓存，需要设置
如果还没效果，请在获取后台数据后，执行如下代码
{
this.$refs.scroller.reset()
})
贴出整个页面的代码。
<div class="jb51code">
<pre class="brush:xhtml;">
<x-header slot="header" :left-options="{showBack: false}" >会议列表
<a slot="right" v-on:click="show = true" > <icon type="search"></icon> </button> </a>
</x-header>
<!-- 会议列表 -->
<scroller v-model="scrollerStatus" height="-46" lock-x scrollbar-y ref="scroller" :bounce="isbounce" :use-pullup="showUp" :pullup-config="upobj" @on-pullup-loading="selPullUp" >
<div class="box2">
<p v-for="list,index in lists">
<router-link :to="{ path: list.id } ">
<p style="height:40px;">
<span class="spanMeetTitle" v-html='(index+1) + " . " + list.name' ></span>
<span class="spanMeetStatu" v-html='list.status'></span>
</p>
<p class="prevSuper">
<form-preview header-label="" header-value="" :bodyItems="list" :footer-buttons="buttons1"></form-preview>
</p>
</router-link>
<hr>
</p>
</div>
</scroller>
<popup v-model="show" @on-hide="log('hide')" @on-show="log('show')" height="93%">
<div class="popup0">
<group title="会议审批状态">
<radio :options="commonList" v-model="checkStatus" @on-change="change"></radio>
</group>
<group title="会议类型">
<selector placeholder="请选择会议类型" v-model="checkType" :options="meetType"></selector>
</group>
<group title="召开时间">
<flexbox>
<flexbox-item>
<div class="flex-demo" style="background-color:white;color:black;height:45px">
<datetime title='' placeholder="请选择" v-model="startTime" format="YYYY-MM-DD HH:mm" @on-change="change" ></datetime>
</div>
</flexbox-item>
至
<flexbox-item>
<div class="flex-demo" style="background-color:white;color:black;height:45px">
<datetime title='' placeholder="请选择" v-model="stopTime" format="YYYY-MM-DD HH:mm" @on-change="change" ></datetime>
</div>
</flexbox-item>
</flexbox>
</group>
<br>
<flexbox orient="vertical">
<flexbox-item><div class="flex-demo" v-on:click="toSearch" >确定</div></flexbox-item>
<flexbox-item><div class="flex-demo" v-on:click="show = false" style="background-color:white;color:black">取消</div></flexbox-item>
</flexbox>
<toast v-model="showToast">已加载全部数据
<loading v-model="isShowLoading" :text="textLoading">
{{ alertMessage }}
<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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
