首页 / JAVASCRIPT / vux如何实现上拉刷新功能

vux如何实现上拉刷新功能

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vux如何实现上拉刷新功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8141字，纯文字阅读大概需要12分钟。

内容图文

最近公司在研发app,选择了基于Vue框架的vux组件库，现总结在实现上拉刷新功能遇到的坑,感兴趣的朋友参考下吧

最近公司在研发app,选择了基于Vue框架的vux组件库，现总结在实现上拉刷新功能遇到的坑：

1.问题：只刷新一次，解决方法：需要自己手动重置状态

this.scrollerStatus.pullupStatus = ‘default'，

2.问题：不能滚动，解决方法：因为启用keep-alive缓存，需要设置

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

如果还没效果，请在获取后台数据后，执行如下代码

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

贴出整个页面的代码。

<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='(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> 
    </p>
    </scroller>
   <!-- 导航 -->
   <Home></Home>
   <!-- 搜索 --> 
   <popup v-model="show" @on-hide="log('hide')" @on-show="log('show')" height="93%">
   <p class="popup0">
    <group> 
     <x-input v-model='meetName' 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='' 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='' 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 '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>

上面是我整理给大家的，希望今后会对大家有帮助。

在vue中使用better-scroll滚动插件

在VUE + UEditor中如何实现单图片跨域上传功能

在vue中有关watch检测到不到对象属性的变化方面的问题

以上就是vux如何实现上拉刷新功能的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的vux如何实现上拉刷新功能全部内容，希望文章能够帮你解决vux如何实现上拉刷新功能所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/287754.html

来源：【匿名】

【上一篇】路径中＃号怎样除去【下一篇】javascript 怎么调用php方法

更多 ►

【vux如何实现上拉刷新功能】教程文章相关的互联网学习教程文章

JavaScript 实现页面中录音功能【代码】【图】

页面中实现录音需要使用浏览器提供的 Media?Recorder API，所以前提是需要浏览器支持 MediaStream Recording 相关的功能。以下代码默认工作在 Chrome 环境中。准备页面首先准备一个页面，其中内容很简单，两个按钮，一个用于录音，一个用于播放。<!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=...

原生JavaScript写出日历功能无引用Jq【代码】【图】

成品显示，可左右切换月份html 代码 <!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>移动端日历</title><link rel="stylesheet" href="./css/calendar.css"> </head> <body><div id="calendarElement"><div class="header"><div class="prev"><i class="previ"></i></div><div class="...

javascript实现简单的动画功能

//在第二个函数positionMessage中设置初始位置与终点，新建html文件是，元素ID为message。function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != ‘function‘) { window.onload=func;}else{ window.onload = function(){ oldonload(); func(); } }}function positionMessage() { if (!document.getElementById) {return false;} if (!document.get...

JavaScript 常用功能总结【代码】【图】

编吐血整理加上翻译，太辛苦了~求赞！本文主要总结了JavaScript 常用功能总结，如一些常用的额JS 对象，基本数据结构，功能函数等，还有一些常用的设计模式。目录：众所周知，JavaScript是动态的面向对象的编程语言，能够实现以下效果：1. 丰富Web 网页功能2. 丰富Web界面3. 实现本地或远程存储。4. 实现分布式网络应用的前端组件，并在后台进行数据存储管理。5. 使用JavaScript可以实现完整的分布式Web 应用。 JavaScript 中的数...

实现简单的网页登录注册功能 (使用html和css以及javascript技术) 没有美化的日后补全【代码】【图】

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>账号注册</title><style>select {width: 100px;padding: 5px;font-size:16px;}</style> </head> <body>  <form action="demo01.html"method="post"> <p>账号:<input type="text"name="userCode"required placeholder="请输入账号:...

javascript常用功能收藏【代码】

引用:http://www.css88.com/archives/5180收集了一些比较常用的javascript函数。字符串长度截取function cutstr(str, len) {var temp,icount = 0,patrn = /[^\x00-\xff]/，strre = "";for (var i = 0; i < str.length; i++) {if (icount < len - 1) {temp = str.substr(i, 1);if (patrn.exec(temp) == null) {icount = icount + 1} else {icount = icount + 2}strre += temp} else {break;}}return strre + "..." }替换全部String....

javascript自定义简单map对象功能【代码】

这里介绍一种js创建简单map对象的方法：function Map() {//创建object对象, 并给object对象添加key和value属性 var obj1=new Object();var obj2=new Object(); obj1.key="zhangsan" ;obj1.value=23;obj2.key="lisi";obj2.value=25;//创建一个数组，将创建的object对象放如到数组中去var map=new Array(obj1,obj2); } 这里只是一中最简单的map（）的构建方式，将含有键值对的object对象存入到Array数组中，就形成了类似...

JavaScript实现的分页功能[用于搭配后台使用]【代码】

1 (function(root){2 3function Page(params){4 5this.oTarget = document.getElementById(params.dom);6this.fn = params.fn;7this.pageNumber = params.pageNumber;8this.interval = params.interval || 2;9this.page = 1; 10this.start = 1; 11this.end = (this.interval*2+1); 1213this.dom(); 14this.bind(); 15 } 16 Page.prototype.dom=function(){ 17this.last = true; 18this.Data = []; 1920if(this....

用户找回密码功能JS验证邮箱通过点击下一步隐藏邮箱输入框并修改下一步按钮的ID【代码】

//这里是BaseDao 1/** 2 * 获得一个对象3 * @param hql4 * @param param5 * @return 6*/ 7public Object get(String hql, Object[] param){8 List<Object> objects = this.getHibernateTemplate().find(hql, param); 9if (objects != null && objects.size() > 0) { 10return objects.get(0); 11 } else { 12returnnull; 13 } 14 }//这里是UsersDaoImpl 1/** 2 * 查找邮箱...

js实现全选与全部取消功能

function checkAll() { //把所有参与选择的checkbox使用相同的name，这里为"num_iid" var eles = document.getElementsByName("num_iid"); var i = 0; // 如果是全选状态，则取消所有的选择 if (isSelectAll() == true) { for ( i = 0; i < eles.length; i++) { eles[i].checked = false; } document.getElementById("selectAll").checked = false; } else { // 否则选中每一个checkbox for ...

我在做评论功能时学到的js一些思路【代码】

在提交评论的时候，如何判断是一级评论还是二级评论（因为都是通过一个文本域提交评论），思路：声明一个全局变量，如果是回复（二级评论）那么会触发点击回复事件，在这个事件的回调函数里给全局变量设置为true；如果没有设为true，则说明是提交一级评论。如何声明全局变量--》here因为是通过一个按钮的点击事件实现回复和一级评论，所以需要用到一个事件触发多个函数的思路。看了一眼这篇博客有了一个思路~呵呵~通过全局变量的值...

js实现打印功能

<input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" /><style type="text/css" media=print>.noprint{display : none }</style><p class="noprint">不需要打印的地方</p><p>打印的部分</p>  <!--...

jQuery部分功能使用js进行实现(初探JQ)【代码】

今天使用js写了段jq中的html()方法。我的原则是废话不多说，直接放代码。。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JQuery初探</title> </head> <body><div id="box"><span>1112</span></div><script>var Kodo = function(selector){returnnew Kodo.prototype.init(selector);}Kodo.prototype = {constructor : Kodo,length : 0,splice : [].splice,selector : ‘‘,id:{},init : function(selector...

Clipboard.js：不用Flash实现剪贴板功能的轻量级JavaScript库【代码】

Zeno Rocha发布了一个专门用于从web页面向本地计算机的剪贴板复制文本的JavaScript库：Clipboard.js。在每一个Github仓库页面的侧边栏上都有一个小部件，用来显示repo的HTTPS克隆地址，当你点击紧挨着这个部件的按钮时，就会复制当前repo的URL到用户的剪贴板中。Github用JavaScript库ZeroClipboard来实现这一功能，问题是这个库是用一个不可见的Flash来完成剪贴操作，而Flash技术正被各大浏览器厂商冷落，所以势必要有一个新的方案...

功能强大的JavaScript引擎--SpiderMonkey与实现【代码】

JavaScript是由Netscape开发的对象脚本语言，其特点是开发简单、功能灵活，目前已广泛应用于WEB页面及服务器应用程序中。HTML本身是静态的、不允许用户干预，但用JavaScript编写的脚本程序就可以在用户的浏览器端运行，可以同用户进行交互，从而实现动态页面。可以将JavaScript与嵌入WEB的大多数对象的事件（如鼠标点击、移动等）相关联，然后用自己的方式处理这些事件。JavaScript提供了丰富的内置函数及命令，能在浏览器中显示HT...

首页 / JAVASCRIPT / vux如何实现上拉刷新功能

vux如何实现上拉刷新功能

内容导读

内容图文

内容总结

内容备注

内容手机端

【vux如何实现上拉刷新功能】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程