基于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>
 <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栏切换内容不断实时刷新数据功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解使用vue实现tab 切换操作

    在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').find('.item') .removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current $('.tab .content').find('.item') .hide().eq(index).show()

  • Vue.js组件tab实现选项卡切换

    Vue.js组件tab实现选项卡切换

    本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:

  • Vue.js tab实现选项卡切换

    本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo

  • Vue2.0 多 Tab切换组件的封装实例

    Vue2.0 多 Tab切换组件的封装实例

    Vue2.0 多 Tab切换组件简单封装,满足自己简单的功能,可以直接拿去使用! 首先上效果图: 功能简单介绍: 1.支持tab切换 2.支持tab定位 3.支持tab自动化 仿React多Tab实现,总之可以正常使用满足日常需求, 1.使用方法: ==index.vue文件== <TabItems> <div name="买入" class="first"> <Content :isContTab = "0" /&

  • vue仿淘宝订单状态的tab切换效果

    前几天刚开始使用vue 做项目,然后自己就在项目中摸索写了一个tab切换的小dome,仿淘宝订单状态的tab切换. HTML 代码: <div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值 <span v-for="(item, i

  • Vue.js组件tabs实现选项卡切换效果

    Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • 详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

    详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

    在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些. 先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件. 效果预览 关键代码及分析如下: <template> // 每一个 tab 绑定了一个点击事件,传入的参数对应着

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

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

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • Vue中tab栏切换的简单实现

    Vue中tab栏切换的简单实现

    目录 一.效果展示 二.实现原理 三.css和h5的代码,获得最基本的样式 1.css 2.H5 这是没有在使用Vue书写前的样式 四.Vue部分 一.效果展示 二.实现原理 主体通过绑定事件,索引的利用,v-for的数组遍历,来实现的切换效果. 具体细节看代码段的解释,根据个人所需去了解一下,更多的是入门理解其中的细思. 三.css和h5的代码,获得最基本的样式 1.css 主体的布局根据个人的喜好,这里我只进行了简单的布局. 其中也用到了浮动,和清除浮动. 主要让展现的效果好看一些.具体样式

  • vue实现tab栏切换效果

    vue实现tab栏切换效果

    本文实例为大家分享了vue实现tab栏切换效果的具体代码,供大家参考,具体内容如下 一个简单的tab栏切换组件,由tabs以及tab-pane组成 效果图 使用 <template>   <div class="container">     <tabs       default-active="2"       class="build-tabs"     >       <tab-pane    

  • vue二选一tab栏切换新做法实现

    vue二选一tab栏切换新做法实现

    问题描述 在我们做项目的过程中,有时候会要做一些tab栏切换效果.有两个tab的,有三个tab的,甚至有五六七八个tab的.平常我们直接拿饿了么的tab组件用就行了,但是偶尔自己闲着没事,自己写个两个tab切换效果的,即二选一效果.闲话少说,上动态效果图 本案例适合两个tab的(三个tab的可以仿照我的写,如果是四五个tab用饿了么组件会更快些) 代码如下 HTML部分 <template> <div id="app"> <div class="

  • vue实现tab栏点击高亮效果

    本文实例为大家分享了tab栏实现点击高亮,供大家参考,具体内容如下 之前面试的时候被问到过如何使用vue实现tab栏切换高亮,今天自己写demo顺便记录一下 vue官方文档里有一个基础知识点叫做对象语法 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> //data如下 data: { isActive: true,

  • JS实现Tab栏切换的两种方式案例详解

    面向过程的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic

  • vue实现鼠标滑动展示tab栏切换

    vue实现鼠标滑动展示tab栏切换

    本文实例为大家分享了vue实现鼠标滑动展示tab栏切换的具体代码,供大家参考,具体内容如下 动画效果: 代码如下: <template>   <div id="header">     <div class="conten_width">       <div class="contnet_width_content">         <div style="    transfo

  • JavaScript实现简易tab栏切换案例

    JavaScript实现简易tab栏切换案例

    本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码,供大家参考,具体内容如下 1. tab栏-案例1 tab栏分析 li里面的分析 js实现隐藏与显示 排他思想: 1).所有元素全部清除样式(干掉其他人) 2).给当前元素设置样式 (留下我自己) 3).注意顺序不能颠倒,首先干掉其他人,再设置自己 我的思路: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta char

  • tab栏切换原理

    tab栏切换原理

    本文是我学习tab栏切换时的笔记,步骤很详细.比较适用于JavaScript初学者 1.基础 - 排他思想 如图,点击任意一个按钮,当前按钮应该显示橘色,其他显示默认颜色灰色. 代码运行步骤: 利用for循环遍历5个按钮: 选中的按钮进行 onclick 事件时,首先删除所有按钮的类名,使其全部显示灰色(34行): 然后给当前点击的按钮添加指定类名,使其显示橘色(37行). 示例代码: <!DOCTYPE html> <html> <head> <meta cha

  • jquery+css实现Tab栏切换的代码实例

    jquery+css实现Tab栏切换的代码实例

    前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难.回来后,再把思路理一理,写一个,基础还是很重要的. 最终要实现的效果图如下: (1)点击tab栏显示对应的内容,并且tab栏样式变化.实现方式:一般tab栏如果要做成比较好看的样式,会切两张图作为背景,一张用于选中时的背景,一张用于未选中的背景.这里为了简单,只用css设置样式.然后为每个tab绑定click事件,当触发click事件时,对应的内容div的display设置block,否则设

随机推荐