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

最近公司在研发app,选择了基于Vue框架的vux组件库，现总结在实现上拉刷新功能遇到的坑：1.

最近公司在研发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>

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