当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 基于Vue实现tab栏切换内容不断实时刷新数据功能

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

2018年05月01日  | 移动技术网IT编程  | 我要评论

太原库房出租,2012红牛街舞大赛,末世黑帝

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

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

先是用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栏切换内容不断实时刷新数据功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网