基于Vue框架vux组件库实现上拉刷新功能


Posted in Javascript onNovember 28, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
简单理解vue中Props属性
Oct 27 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
JavaScript中关于class的调用方法
Nov 28 #Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 #Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 #Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 #Javascript
Dropify.js图片宽高自适应的方法
Nov 27 #Javascript
jfinal与bootstrap的登出实战详解
Nov 27 #Javascript
JQuery 又谈ajax局部刷新
Nov 27 #jQuery
You might like
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
Laravel find in set排序实例
2019/10/09 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
opencv+python实现均值滤波
2020/02/19 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
企业给企业的表扬信
2014/01/13 职场文书
开学典礼演讲稿
2014/05/23 职场文书
求职信名称怎么写
2014/05/26 职场文书
党课培训心得体会
2014/09/02 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL