使用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 对象中的类数组操作
Apr 27 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
JS实现的自定义map方法示例
May 17 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
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中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
一分钟理解js闭包
2016/05/04 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
九步学会Python装饰器
2015/05/09 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python中partial()基础用法说明
2018/12/30 Python
Python猜数字算法题详解
2020/03/01 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
实习生自我鉴定
2013/12/12 职场文书
考察邀请函范文
2015/01/31 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
初中运动会前导词
2015/07/20 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
高中团支书竞选稿
2015/11/21 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android