最近公司在研發(fā)app,選擇了基于Vue框架的vux組件庫(kù)，現(xiàn)總結(jié)在實(shí)現(xiàn)上拉刷新功能遇到的坑：
1.問(wèn)題：只刷新一次，解決方法：需要自己手動(dòng)重置狀態(tài)
this.scrollerStatus.pullupStatus = ‘default'，
2.問(wèn)題：不能滾動(dòng)，解決方法：因?yàn)閱⒂胟eep-alive緩存，需要設(shè)置

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

如果還沒(méi)效果，請(qǐng)?jiān)讷@取后臺(tái)數(shù)據(jù)后，執(zhí)行如下代碼

this.$nxtTick(() => {    this.$refs.scroller.reset()   })

貼出整個(gè)頁(yè)面的代碼。

<template>   <div style="height:100%;">    <x-header slot="header" :left-options="{showBack: false}" >會(huì)議列表     <a slot="right" v-on:click="show = true" > <icon type="search"></icon> </button> </a>     </x-header>    <!-- 會(huì)議列表 -->    <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>   <!-- 導(dǎo)航 -->   <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="請(qǐng)輸入“會(huì)議名稱”搜索"></x-input>      <div style="float:left;margin-top: -36px;"><icon type="search"></icon></div>     </group> <!--      <group>      <checklist :max=1 title="會(huì)議審批狀態(tài)" required :options="commonList" v-model="checkStatus" @on-change="change"></checklist>     </group> -->     <group title="會(huì)議審批狀態(tài)">     <radio :options="commonList" v-model="checkStatus" @on-change="change"></radio>    </group>    <group title="會(huì)議類型">      <selector placeholder="請(qǐng)選擇會(huì)議類型" v-model="checkType" :options="meetType"></selector>    </group>     <group title="召開(kāi)時(shí)間">     <flexbox>      <flexbox-item>      <div class="flex-demo" style="background-color:white;color:black;height:45px">        <datetime title='' placeholder="請(qǐng)選擇" 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="請(qǐng)選擇" 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">已加載全部數(shù)據(jù)</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: '‘召開(kāi)時(shí)間' 不能大于 ‘結(jié)束時(shí)間'',   value: '',   meetName: '',   startTime: '',   stopTime: '',   meetType: [],   commonList: [{key: '20', value: '審批中'}, {key: '50', value: '審批通過(guò)'}, {key: '', value: '全部'}],   checkStatus: '',   checkType: '',   commonList2: [],   results: [],   lists: [[]],   buttons1: [{    style: 'primary',    text: '查看更多',    link: '/Message'   }],   upobj: {    content: '請(qǐng)上拉刷新數(shù)據(jù)',    pullUpHeight: 60,    height: 40,    autoRefresh: false,    downContent: '請(qǐng)上拉刷新數(shù)據(jù)',    upContent: '請(qǐng)上拉刷新數(shù)據(jù)',    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: '地點(diǎn)',      value: data[i].ADDRESS     }     meetlist.push(obj)     obj = {      label: '主持人',      value: personName     }     meetlist.push(obj)     obj = {      label: '召開(kāi)時(shí)間',      value: global.formatDate.methods.toSet(data[i].ACT_START_TIME, 'yyyy-MM-dd HH:mm')     }     meetlist.push(obj)     obj = {      label: '會(huì)議類型',      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 = '審批通過(guò)'     }     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('上拉刷新數(shù)據(jù)')   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>