使用vux实现上拉刷新功能遇到的坑


Posted in Javascript onFebruary 08, 2018

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

总结

以上所述是小编给大家介绍的使用vux实现上拉刷新功能遇到的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery验证工具类搜集整理
Jan 16 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
jquery实现拖动效果
Aug 10 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
jQuery实现的简单图片轮播效果完整示例
Feb 08 #jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 #jQuery
AnglarJs中的上拉加载实现代码
Feb 08 #Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 #Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 #Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 #Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 #Javascript
You might like
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
Python解惑之整数比较详解
2017/04/24 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
金融专业推荐信
2013/11/14 职场文书
实习生个人的自我评价
2013/12/08 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
软件项目开发计划书
2014/05/01 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
2015政治思想表现评语
2015/03/25 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle