基于Vue框架vux组件库实现上拉刷新功能_vue.js_脚本之家

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

软件之家 ,多年来厂家在研究开发app,选用了依赖Vue框架的vux组件库,现计算在促成上拉刷新成效相见的坑:
1.主题素材:只刷新三遍,消除办法:须要团结手动重新初始化状态
this.scrollerStatus.pullupStatus = ‘default’,
2.难点:无法滚动,消除方式:因为启用keep-alive缓存,供给设置

如上就是本文的全体内容,希望对我们的就学抱有助于,也指望我们多多指教脚本之家。

this.$nxtTick => { this.$refs.scroller.reset

  会议列表                                              至        
  确定 取消    已加载全部数据   {{ alertMessage }}  .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; }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 this.getMeetType => { this.$refs.scroller.reset }, methods: { log  { console.log }, getMeetList  { 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 var data = response.body.Data if  { 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 = { label: '主持人', value: personName } meetlist.push obj = { label: '召开时间', value: global.formatDate.methods.toSet(data[i].ACT_START_TIME, 'yyyy-MM-dd HH:mm') } meetlist.push obj = { label: '会议类型', value: data[i].MEETING_TYPE_NAME } meetlist.push 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 } this.isShowLoading = false if  { 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  { console.log console.log }, change2  { console.log }, resultClick  { }, toSearch  if (this.startTime && this.stopTime && this.startTime > this.stopTime) { this.isShowAlert = true } else { this.PageIndex = 0 this.getMeetList } }, selPullUp () { console.log this.PageIndex++ this.getMeetList }, 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 } }, response => { // error callback }) } }, activated () { this.$refs.scroller.reset() }} @import '~vux/src/styles/1px.less';.flex-demo { text-align: center; color: #fff; background-color: #20b907; border-radius: 4px; background-clip: padding-box;}

万一尚未意义,请在获得后台数据后,实行如下代码

相关文章

发表评论