使用vux实现上拉刷新的总结
最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑:
1.问题:只刷新一次,解决方法:需要自己手动重置状态
this.scrollerStatus.pullupStatus = ‘default’,
2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置
activated () {
this.$refs.scroller.reset()
}
如果还没效果,请在获取后台数据后,执行如下代码
this.$nxtTick(() => {
this.$refs.scroller.reset()
})
贴出整个页面的代码。
<template>
<div style="height:100%;"> <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> <!-- 导航 -->
<Home></Home> <!-- 搜索 -->
<popup v-model="show" @on-hide="log('hide')" @on-show="log('show')" height="93%">
<div class="popup0">
<group>
<x-input v-model='meetName' placeholder="请输入“会议名称”搜索"></x-input>
<div style="float:left;margin-top: -36px;"><icon type="search"></icon></div>
</group>
<!--
<group>
<checklist :max=1 title="会议审批状态" required :options="commonList" v-model="checkStatus" @on-change="change"></checklist>
</group> --> <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> </div>
</popup> <toast v-model="showToast">已加载全部数据</toast> <loading v-model="isShowLoading" :text="textLoading"></loading> <alert v-model="isShowAlert" :title="AlertCongratulations" > {{ alertMessage }}</alert>
</div>
</template> <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> <script>
import { XHeader, Group, FormPreview, Tabbar, TabbarItem, Scroller, Icon, Popup, XSwitch, Toast, XInput, Checklist, Datetime, Flexbox, FlexboxItem, Selector, Loading, Alert, Radio } from 'vux'
import Home from './Home' export default {
components: {
XHeader,
Home,
Group,
FormPreview,
Tabbar,
TabbarItem,
Scroller,
Icon,
Popup,
XSwitch,
Toast,
XInput,
Checklist,
Datetime,
Flexbox,
FlexboxItem,
Selector,
Loading,
Alert,
Radio
},
data () {
return {
type: '1',
PageIndex: 0,
show: false,
showToast: false,
showloading: false,
showUp: true,
isbounce: false,
isShowAlert: false,
AlertCongratulations: '条件有误',
textloading: '加载中',
alertMessage: '‘召开时间’ 不能大于 ‘结束时间’',
value: '',
meetName: '',
startTime: '',
stopTime: '',
meetType: [],
commonList: [{key: '20', value: '审批中'}, {key: '50', value: '审批通过'}, {key: '', value: '全部'}],
checkStatus: '',
checkType: '',
commonList2: [],
results: [],
lists: [[]],
buttons1: [{
style: 'primary',
text: '查看更多',
link: '/Message'
}],
upobj: {
content: '请上拉刷新数据',
pullUpHeight: 60,
height: 40,
autoRefresh: false,
downContent: '请上拉刷新数据',
upContent: '请上拉刷新数据',
loadingContent: '加载中...',
clsPrefix: 'xs-plugin-pullup-'
},
isShowLoading: false,
textLoading: '加载中',
scrollerStatus: {
pullupStatus: 'default'
}
}
},
mounted () {
console.log(this.scrollerStatus.pullupStatus)
this.getMeetList(true)
this.getMeetType()
this.$nextTick(() => {
this.$refs.scroller.reset()
})
},
methods: {
log (str) {
console.log(str)
},
getMeetList (isEmpty) {
var APPROVE_STATUS = this.checkStatus
var MEETING_TYPE = this.checkType
this.isShowLoading = true
this.$http.post(global.httpsUrl + '/Meet/GetMeetList', {'HumanId': global.userid, 'KEY': this.meetName, 'APPROVE_STATUS': APPROVE_STATUS, 'MEETING_TYPE': MEETING_TYPE, 'START_DATE': this.startTime, 'STOP_DATE': this.stopTime, 'PageIndex': this.PageIndex, 'PageSize': '2'}).then(response => {
// sucess callback
console.log('111')
var data = response.body.Data
if (isEmpty) {
this.lists = []
this.show = false
} else {
if (data && data.length === 0) {
this.showToast = true
this.isShowLoading = false
this.scrollerStatus.pullupStatus = 'disabled' // 禁用下拉
return
}
}
for (var i = 0; i < data.length; i++) {
if (data[i].APPROVE_STATUS < 20) {
break
}
var personName = data[i].PERSION1_NAME
if (personName && personName.length > 0) {
personName = personName.substring(0, personName.indexOf('>'))
}
var meetlist = []
var obj = {
label: '地点',
value: data[i].ADDRESS
}
meetlist.push(obj)
obj = {
label: '主持人',
value: personName
}
meetlist.push(obj)
obj = {
label: '召开时间',
value: global.formatDate.methods.toSet(data[i].ACT_START_TIME, 'yyyy-MM-dd HH:mm')
}
meetlist.push(obj)
obj = {
label: '会议类型',
value: data[i].MEETING_TYPE_NAME
}
meetlist.push(obj)
meetlist.id = 'FromMeet/' + data[i].MEETING_MINUTES_GUID + '/123'
meetlist.name = data[i].MEETING_NAME
var vstatus = '审批中'
if (data[i].APPROVE_STATUS === 50) {
vstatus = '审批通过'
}
meetlist.status = vstatus
this.lists.push(meetlist)
}
this.isShowLoading = false
if (!isEmpty) {
this.scrollerStatus.pullupStatus = 'default'
// this.$refs.scroller.reset()
console.log(this.scrollerStatus.pullupStatus)
this.$nextTick(() => {
this.$refs.scroller.reset()
})
}
}, response => {
// error callback
this.show = false
})
},
showSearch () {
this.show = true
},
change (val) {
console.log('change', val)
console.log(this.startTime)
},
change2 (val) {
console.log('change', val)
},
resultClick () {
},
getResult () {
},
toSearch () {
console.log(2222)
if (this.startTime && this.stopTime && this.startTime > this.stopTime) {
this.isShowAlert = true
} else {
this.PageIndex = 0
this.getMeetList(true)
}
},
selPullUp () {
console.log('上拉刷新数据')
this.PageIndex++
this.getMeetList(false)
},
getMeetType () {
this.$http.post(global.httpsUrl + '/Meet/GetMeetType').then(response => {
// sucess callback
var data = response.body.Data
for (var i = data.length - 1; i >= 0; i--) {
var obj = {
key: data[i].TYPE_GUID,
value: data[i].TYPE_NAME
}
this.meetType.push(obj)
}
}, response => {
// error callback
})
}
},
activated () {
this.$refs.scroller.reset()
}
}
</script> <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;
}
</style>
使用vux实现上拉刷新的总结的更多相关文章
- vux (scroller)上拉刷新、下拉加载更多
1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性 <scroller :lockX=true height="-170" :pulldown-conf ...
- 【转】vux (scroller)上拉刷新、下拉加载更多
1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性 <scroller :lockX="true" height="-170" :p ...
- SwipeRefreshLayout + RecyclerView 实现 上拉刷新 和 下拉刷新
下拉刷新和上拉刷新都用SwipeRefreshLayout 自带的进度条 布局 <?xml version="1.0" encoding="utf-8"? ...
- 使用MJRefresh遇到的一个问题,上拉刷新后tableview瞬间滑到最底部
最近用MJRefresh上拉刷新时遇到一个问题,就是上拉刷新后,tableview会瞬间滑到最底部,用户还要往回翻才能看到新刷出来的数据,体验十分不好.查了很久没找到原因,最后发现在refreshvi ...
- MUI - 上拉刷新/下拉加载
新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...
- Android UI之下拉刷新上拉刷新实现
在实际开发中我们经常要用到上拉刷新和下拉刷新,因此今天我写了一个上拉和下拉刷新的demo,有一个自定义的下拉刷新控件 只需要在布局文件中直接引用就可以使用,非常方便,非常使用,以下是源代码: 自定义的 ...
- Android PullToRefreshListView上拉刷新和下拉刷新
PullToRefreshListView实现上拉和下拉刷新有两个步骤: 1.设置刷新方式 pullToRefreshView.setMode(PullToRefreshBase.Mode.BOTH) ...
- ListView(2)最简单的上拉刷新,下拉刷新
最简单的上拉刷新和下拉刷新,当listview滚动到底部时向上拉刷新数据.当listview滚动到最顶部时下拉刷新. 图1,上拉刷新 图2,下拉刷新 1,设置lisview,加载heade ...
- jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
随机推荐
- Redhat系列使用ISO或者光盘制作yum本地安装源
适用系统:redhat系列 示例系统:CentOS 6x86_64 环境:虚拟机 有时候做实验又不能联网的情况下想装一款软件时,经常会搞的头大:难道要去系统镜像中一个个拷出来再用rpm安装?各种依 ...
- php学习八:封装
一:在php中,用class关键字来创建一个类,即进行封装:在类里面有成员属性和方法行为组成: 1.成员属性:用关键字var来声明,可以给初始值也可以不给;现在var废弃,用public来声明,pub ...
- poj_3283 trie树
题目大意 将一副牌进行编号,四种花色分别标记为'C'.'D'.'H'.'S',数值标记为'A'.'1'.'2'.'3'.'4'.'5'.'6'.'7'.'8'.'9'.'10'.'J'.'Q'.'K' ...
- Excel打开csv文件乱码问题的解决办法
excel打开csv 出现乱码怎么解决 https://jingyan.baidu.com/article/ac6a9a5e4c681b2b653eacf1.html CSV是逗号分隔值的英文缩写,通 ...
- sencha touch 入门系列 扩展篇之sencha touch 项目打包压缩
经常有新手同学抱怨说sencha touch的项目加载速度为什么这么慢,经常要10秒左右的时间甚至更多, 大家都知道,sencha touch开发的项目中引用了大量的js文件,当我们打开项目时,st的 ...
- 什么是runtime?什么是webgl?
一 什么是Runtime? Egret官方解释:https://www.egret.com/products/runtime.html 二.什么是WebGL渲染? egret官方解释:http://d ...
- 下载组件Jspsmartupload中文乱码解决办法
先用jdgui反编译jar包,得到源码,然后将源码拷贝到myeclipse中,注意路径是按照源码的路径 打开默认会有错误提示,稍微改改就解决了 1,打开“ SmartUpload.java ”,查 ...
- SMGP关键代码
从网上下载java的API就可以开发了我们需要修改的类是: import java.io.IOException; import cn.com.zjtelecom.smgp.Client; impor ...
- 微信小程序 --- action-sheet底部弹框
action-sheet:从屏幕底部弹出一个菜单,选择: 使用的时候,在给不同的 action-sheet-item 添加不同的事件. 效果: (这里的确定可以有多个) 代码: <button ...
- mysql查看线程详解(转载)
如果有 SUPER 权限,则可以看到全部的线程,否则,只能看到自己发起的线程(这是指,当前对应的 MySQL 帐户运行的线程). mysql> show processlist; +—–+——— ...