How to implement pull-up refresh function in vux

Recently, the company is developing an app and has chosen the vux component library based on the Vue framework. Now we summarize the pitfalls encountered in implementing the pull-up refresh function. Interested friends can refer to it.

Recently, the company is developing an app. , chose the vux component library based on the Vue framework, and now summarizes the pitfalls encountered in implementing the pull-up refresh function:

1. Problem: only refreshes once, solution: need to manually reset the state

this.scrollerStatus.pullupStatus = ‘default'，

2. Problem: Cannot scroll. Solution: Because keep-alive caching is enabled, you need to set

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

If it still doesn’t work, please execute the following code after obtaining the background data

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

Post the code of the entire page.

<template> 
  <p 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" >
    <p class="box2">
      <p v-for="list, index in lists">  
         <router-link :to="{ path: list.id } ">
           <p style="height:40px;"> 
            <span class="spanMeetTitle" v-html=&#39;(index+1) + " . " + list.name&#39; ></span>
            <span class="spanMeetStatu" v-html=&#39;list.status&#39;></span>
           </p> 
          <p class="prevSuper">
           <form-preview header-label="" header-value="" :bodyItems="list" :footer-buttons="buttons1"></form-preview>
          </p>
          </router-link>  
          <hr>  
       </p> 
    </p>
    </scroller>
   <!-- 导航 -->
   <Home></Home>
   <!-- 搜索 --> 
   <popup v-model="show" @on-hide="log(&#39;hide&#39;)" @on-show="log(&#39;show&#39;)" height="93%">
   <p class="popup0">
    <group> 
     <x-input v-model=&#39;meetName&#39; placeholder="请输入“会议名称”搜索"></x-input> 
     <p style="float:left;margin-top: -36px;"><icon type="search"></icon></p> 
    </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>
      <p class="flex-demo" style="background-color:white;color:black;height:45px"> 
       <datetime title=&#39;&#39; placeholder="请选择" v-model="startTime" format="YYYY-MM-DD HH:mm" @on-change="change" ></datetime>
      </p>
      </flexbox-item>
      至
      <flexbox-item>
      <p class="flex-demo" style="background-color:white;color:black;height:45px">
       <datetime title=&#39;&#39; placeholder="请选择" v-model="stopTime" format="YYYY-MM-DD HH:mm" @on-change="change" ></datetime>
      </p>
      </flexbox-item>
     </flexbox> 
    </group>
    <br>
    <flexbox orient="vertical">
     <flexbox-item><p class="flex-demo" v-on:click="toSearch" >确定</p></flexbox-item>
     <flexbox-item><p class="flex-demo" v-on:click="show = false" style="background-color:white;color:black">取消</p></flexbox-item>
    </flexbox>
   </p>
  </popup>
  <toast v-model="showToast">已加载全部数据</toast>
  <loading v-model="isShowLoading" :text="textLoading"></loading>
  <alert v-model="isShowAlert" :title="AlertCongratulations" > {{ alertMessage }}</alert>
  </p>
</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 &#39;vux&#39;
import Home from &#39;./Home&#39;
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: &#39;1&#39;,
   PageIndex: 0,
   show: false,
   showToast: false,
   showloading: false,
   showUp: true,
   isbounce: false,
   isShowAlert: false,
   AlertCongratulations: &#39;条件有误&#39;,
   textloading: &#39;加载中&#39;,
   alertMessage: &#39;‘召开时间&#39; 不能大于 ‘结束时间&#39;&#39;,
   value: &#39;&#39;,
   meetName: &#39;&#39;,
   startTime: &#39;&#39;,
   stopTime: &#39;&#39;,
   meetType: [],
   commonList: [{key: &#39;20&#39;, value: &#39;审批中&#39;}, {key: &#39;50&#39;, value: &#39;审批通过&#39;}, {key: &#39;&#39;, value: &#39;全部&#39;}],
   checkStatus: &#39;&#39;,
   checkType: &#39;&#39;,
   commonList2: [],
   results: [],
   lists: [[]],
   buttons1: [{
    style: &#39;primary&#39;,
    text: &#39;查看更多&#39;,
    link: &#39;/Message&#39;
   }],
   upobj: {
    content: &#39;请上拉刷新数据&#39;,
    pullUpHeight: 60,
    height: 40,
    autoRefresh: false,
    downContent: &#39;请上拉刷新数据&#39;,
    upContent: &#39;请上拉刷新数据&#39;,
    loadingContent: &#39;加载中...&#39;,
    clsPrefix: &#39;xs-plugin-pullup-&#39;
   },
   isShowLoading: false,
   textLoading: &#39;加载中&#39;,
   scrollerStatus: {
    pullupStatus: &#39;default&#39;
   }
  }
 },
 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 + &#39;/Meet/GetMeetList&#39;, {&#39;HumanId&#39;: global.userid, &#39;KEY&#39;: this.meetName, &#39;APPROVE_STATUS&#39;: APPROVE_STATUS, &#39;MEETING_TYPE&#39;: MEETING_TYPE, &#39;START_DATE&#39;: this.startTime, &#39;STOP_DATE&#39;: this.stopTime, &#39;PageIndex&#39;: this.PageIndex, &#39;PageSize&#39;: &#39;2&#39;}).then(response => {
   // sucess callback
    console.log(&#39;111&#39;)
    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 = &#39;disabled&#39; // 禁用下拉
      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(&#39;>&#39;))
     }
     var meetlist = []
     var obj = {
      label: &#39;地点&#39;,
      value: data[i].ADDRESS
     }
     meetlist.push(obj)
     obj = {
      label: &#39;主持人&#39;,
      value: personName
     }
     meetlist.push(obj)
     obj = {
      label: &#39;召开时间&#39;,
      value: global.formatDate.methods.toSet(data[i].ACT_START_TIME, &#39;yyyy-MM-dd HH:mm&#39;)
     }
     meetlist.push(obj)
     obj = {
      label: &#39;会议类型&#39;,
      value: data[i].MEETING_TYPE_NAME
     }
     meetlist.push(obj)
     meetlist.id = &#39;FromMeet/&#39; + data[i].MEETING_MINUTES_GUID + &#39;/123&#39;
     meetlist.name = data[i].MEETING_NAME
     var vstatus = &#39;审批中&#39;
     if (data[i].APPROVE_STATUS === 50) {
      vstatus = &#39;审批通过&#39;
     }
     meetlist.status = vstatus
     this.lists.push(meetlist)
    }
    this.isShowLoading = false
    if (!isEmpty) {
     this.scrollerStatus.pullupStatus = &#39;default&#39;
     // 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(&#39;change&#39;, val)
   console.log(this.startTime)
  },
  change2 (val) {
   console.log(&#39;change&#39;, 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(&#39;上拉刷新数据&#39;)
   this.PageIndex++
   this.getMeetList(false)
  },
  getMeetType () {
   this.$http.post(global.httpsUrl + &#39;/Meet/GetMeetType&#39;).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 &#39;~vux/src/styles/1px.less&#39;;
.flex-demo {
 text-align: center;
 color: #fff;
 background-color: #20b907;
 border-radius: 4px;
 background-clip: padding-box;
}
</style>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Using better-scroll scrolling plug-in in vue

How to implement single image cross-domain upload in VUE UEditor Function

Problems in vue about watch not being able to detect changes in object properties

The above is the detailed content of How to implement pull-up refresh function in vux. For more information, please follow other related articles on the PHP Chinese website!