国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

使用vux實現(xiàn)上拉刷新功能遇到的坑

2019-11-19 14:23:19
字體:
供稿:網(wǎng)友

最近公司在研發(fā)app,選擇了基于Vue框架的vux組件庫,現(xiàn)總結(jié)在實現(xiàn)上拉刷新功能遇到的坑:

1.問題:只刷新一次,解決方法:需要自己手動重置狀態(tài)

this.scrollerStatus.pullupStatus = ‘default', 

2.問題:不能滾動,解決方法:因為啟用keep-alive緩存,需要設(shè)置

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

如果還沒效果,請在獲取后臺數(shù)據(jù)后,執(zhí)行如下代碼

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="會議審批狀態(tài)" required :options="commonList" v-model="checkStatus" @on-change="change"></checklist>     </group> -->     <group title="會議審批狀態(tài)">     <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">已加載全部數(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: '‘召開時間' 不能大于 ‘結(jié)束時間'',   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: '請上拉刷新數(shù)據(jù)',    pullUpHeight: 60,    height: 40,    autoRefresh: false,    downContent: '請上拉刷新數(shù)據(jù)',    upContent: '請上拉刷新數(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: '地點',      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('上拉刷新數(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>

總結(jié)

以上所述是小編給大家介紹的使用vux實現(xiàn)上拉刷新功能遇到的坑,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持!

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 楚雄市| 德昌县| 东海县| 南溪县| 张北县| 浪卡子县| 云阳县| 资阳市| 乃东县| 偃师市| 六枝特区| 佛坪县| 来宾市| 昌宁县| 桐柏县| 天全县| 南投市| 泾源县| 鄂伦春自治旗| 广昌县| 锡林郭勒盟| 乌什县| 吴堡县| 大洼县| 潞西市| 铜山县| 绿春县| 西安市| 吉木萨尔县| 蓬溪县| 锡林郭勒盟| 潜山县| 吉首市| 阿图什市| 柘城县| 石屏县| 洛川县| 绥芬河市| 定兴县| 四平市| 万全县|