Iview的Tabs定时切换

用到setInterval()函数

<Tabs :animated="false"v-model="mainCate.loopIndex"@on-click="fixTab"><TabPane :name="trunkModulePrefix+'0'" label="模块1">模块1的内容</TabPane><TabPane :name="trunkModulePrefix+'1'" label="模块2">模块2</TabPane><TabPane :name="trunkModulePrefix+'2'" label="模块3">模块3内容</TabPane></Tabs>

const TRUNK_MODULE_PREFIX = 'trunk_module_';

data() {return {/**前缀 */trunkModulePrefix:TRUNK_MODULE_PREFIX,/**Tab轮换控制器*/mainCate:{loopEnabled:true,loopIndexNum:0,// loopIndex:'trunk_module_0'loopIndex:TRUNK_MODULE_PREFIX+'0'},}},methods: {/*** 点击模块tab* @param event*/fixTab(event){this.$set(this.mainCate,'loopEnabled',false);this.$set(this.mainCate,'loopIndex',event);this.$set(this.mainCate,'loopIndexNum',StringUtils.subString(event,this.trunkModulePrefix.length));},/***自动轮播模块*/loopTabs(){let _this = this;var interval = setInterval(()=>{_this.mainCate.loopIndexNum = (_this.mainCate.loopIndexNum+1)%3;_this.mainCate.loopIndex = _this.trunkModulePrefix + _this.mainCate.loopIndexNum;if(!_this.mainCate.loopEnabled){clearInterval(interval) ;}},5001);}
}mounted() {this.loopTabs();},

Iview的Tabs定时切换相关推荐

tabs选项卡切换效果（jquery版）
以前写过一篇 tabs选项卡切换效果,不过是用原生 javascript 写的,最近在学习 jquery,今天抽空用 jquery 重写了这个效果. 效果图如下: html 代码如下: <!DO ...
可自动定时切换的选项卡/滑动门导航代码
代码简介: 这个滑动门特效不错,可以设定时间,自动循环切换,也可以鼠标控制,而且选项卡也比较漂亮,在新浪和百度见到过这种自动切换的TAB,很实用,代码也简洁. 代码内容: <!DOCTYPE h ...
android定时切换活动,安卓手机如何定时自动切换情景模式 (全文)
相信很多人都知道手机情景模式这个功能.它可以根据不同场景环境而将手机调为静音或者震动模式.这个功能确确实实方便了许多人,因而也经常被使用.但是很多人希望手机能定时自动切换情景模式.安卓系统本身目前并不 ...
换IP软件能否实现定时切换IP？一起来验证
有时候,因工作原因需要不同的IP,这个时候我们应该如何来切换电脑IP呢?许多人会说使用换IP软件啊,那么换IP软件真的可以实现自动切换电脑IP地址吗?让我们一起来验证下. 1.首先,我们先查看一下本机 ...
F5定时切换维护页面
方法:可以利用crontab跑计划任务,也可以用shell脚本去执行icontrol来调用不同的pool,实现维护页面和正常页面的切换 1) 根据icontrol的API,创建XML请求的文件,so ...
给 WordPress 博客添加 Tabs 标签切换功能
博客中的tabs切换信息展示效果已经不新鲜了,现在很多的Wordpress主题默认就提供Tabs选项卡功能,网上也有很多教程可以自己手动实现.使用Tabs切换功能,好处很多,最为明显的就是可以充分利用 ...
Unity代码设置天空盒子skybox 及定时切换
目录: 一.代码二.解析三.核心前言:并非自创,看的是同行的博文--在此向前人致谢一.代码 using System.Collections; using System.Collections ...
php 如何实现图表联动,echarts实现地图定时切换散点与多图表级联联动详解
1. 摘要最近做项目遇到个统计相关需求,一个页面中大概四个或更多图形统计,百度地图.饼图.柱状图.线型图.百度地图上显示所有店面在全国各地大概位置,目前暂定每省一个,在地图上显示散点.如默认显示郑 ...
C++定时切换桌面背景
本代码是将需要切换的图片路径保存到一个文件中,代码从文件中读取这些图片,并定期切换. 注意:编码方式用多字节字符集,否则会出现无法正确显示桌面背景的情况(也就是屏幕变成黑色了--黑屏),原因可能是再传 ...

Iview的Tabs定时切换

Iview的Tabs定时切换相关推荐

最新文章

热门文章