基于Vue实现tab栏切换内容不断实时刷新数据功能
23 浏览量
2020-08-30
20:51:07
上传
评论
收藏 49KB PDF 举报
基于基于Vue实现实现tab栏切换内容不断实时刷新数据功能栏切换内容不断实时刷新数据功能
在项目开发中遇到这样需求，就是有几个tab栏，每个tab栏对应的ajax请求不一样，内容区域一样，内容为实时
刷新数据，实现方法其实很简单的，下面小编给大家带来了基于Vue实现tab栏切换内容不断实时刷新数据功
能，需要的朋友参考下吧
先说一下产品需求，就是有几个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>
资源评论
