基于Vue实现tab栏切换内容不断实时刷新数据功能


Posted in Javascript onApril 13, 2017

先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好

也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来

基于Vue实现tab栏切换内容不断实时刷新数据功能

先是用jq实现了一版

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="renderer" content="webkit">
 <title>Title</title>
 <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div>
 <ul>
 <li>click</li>
 <li>click</li>
 <li>click</li>
 <li>click</li>
 <li>click</li>
 </ul>
</div>
<script>
 var arr=[
 function(){console.log(0);},
 function(){console.log(1);},
 function(){console.log(2);},
 function(){console.log(3);},
 function(){console.log(4);}
 ];
 var seti=setInterval(arr[0],1000)
 $('li').click(function(){
 clearInterval(seti)
 seti=setInterval(arr[$(this).index()],1000)
 })
</script>
</body>
</html>

再看vue版

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="renderer" content="webkit">
 <title>Title</title>
 <script src="https://unpkg.com/vue@2.2.6/dist/vue.min.js"></script>
</head>
<body>
<div id="vm">
 <button @click="tab(0)">click0</button>
 <button @click="tab(1)">click1</button>
 <button @click="tab(2)">click2</button>
 <button @click="tab(3)">click3</button>
 <button @click="tab(4)">click4</button>
 <div>
 <p>{{show}}</p>
 </div>
</div>
<script>
 var vm1 = new Vue({
 el: '#vm',
 data: {
  arr:[
  function(){console.log(0);},
  function(){console.log(1);},
  function(){console.log(2);},
  function(){console.log(3);},
  function(){console.log(4);}
  ],
  time1:'',
  time2:'',
  show:'',
  num:0,
 },
 methods: {
  tab: function(index){
  //如果每个tab的方法不一样,提前用一个数组把方法保存起来
  clearInterval(this.time1)
  this.time1=setInterval(this.arr[index],1000)
  //以下是调用同一种方法的时候可以不需要设置数组
  this.num = 0
  clearInterval(this.time2)
  this.time2 = this.fun(index)
  },
  fun:function(index){
  var _this=this;
  return setInterval(function(){
   //写个随机数显示在页面,具体业务需求应该是ajax请求
   var random=String(parseInt(Math.random()*100000000000))
   //字符一个一个显示在页面上
   _this.show=index+random.substring(0,_this.num++);
  },300)
  }
 },
 mounted:function(){
  this.time1=setInterval(this.arr[0],1000)
 }
 });
</script>
</body>
</html>

以上所述是小编给大家介绍的基于Vue实现tab栏切换内容不断实时刷新数据功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 #Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 #Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 #Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 #jQuery
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 #Javascript
vue如何引用其他组件(css和js)
Apr 13 #Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 #Javascript
You might like
Zend引擎的发展 [15]
2006/10/09 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
PHP count()函数讲解
2019/02/03 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
python生成随机mac地址的方法
2015/03/16 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python抖音表白程序源代码
2019/04/07 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
上海世博会口号
2014/06/19 职场文书
公司租房协议书范本
2014/10/08 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书