基于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 相关文章推荐
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
Vue实现星级评价效果实例详解
Dec 30 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
PHP7标量类型declare用法实例分析
2016/09/26 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
three.js中文文档学习之创建场景
2017/11/20 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
vue实现移动端拖动排序
2020/08/21 Javascript
Python标准库inspect的具体使用方法
2017/12/06 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python容器类型公共方法总结
2020/08/19 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
巧克力蛋糕店创业计划书
2014/01/14 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
护士个人年终总结
2015/02/13 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
实习介绍信范文
2015/05/05 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
医院见习总结
2015/06/24 职场文书
理想国读书笔记
2015/06/25 职场文书
晚会开幕词范文
2016/03/04 职场文书
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL