vux如何实现上拉刷新功能

最近公司在研发app,选择了基于vue框架的vux组件库，现总结在实现上拉刷新功能遇到的坑,感兴趣的朋友参考下吧

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

1.问题：只刷新一次，解决方法：需要自己手动重置状态

this.scrollerStatus.pullupStatus = ‘default'，

登录后复制

2.问题：不能滚动，解决方法：因为启用keep-alive缓存，需要设置

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

登录后复制

如果还没效果，请在获取后台数据后，执行如下代码

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(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  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() }} @import '~vux/src/styles/1px.less';.flex-demo { text-align: center; color: #fff; background-color: #20b907; border-radius: 4px; background-clip: padding-box;}

登录后复制

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中使用better-scroll滚动插件

在vue中使用better-scroll滚动插件

在vue中使用better-scroll滚动插件

以上就是vux如何实现上拉刷新功能的详细内容，更多请关注【创想鸟】其它相关文章！