<template>
<a-tabs :active-key="currentKey" @change="callback">
<a-tab-pane v-for="(tem,index) in pages" :key="index"
class="nav_active">
<!-- scrolling="no" 取消滚动条 -->
<span slot="tab">
<img :src="tem.imgSrc" style="position: relative; top:-3px">
{{tem.tabName}}
</span>
<iframe style="width: 100%;" :src="tem.iframeSrc" frameborder="no" allowtransparency="yes"
scrolling="no"></iframe>
</a-tab-pane>
</a-tabs>
</template>
这里绑定了一个变量currentKey, 通过修改currentKey的值,改变选中的标签页。a-tabs的属性使用active-key, 不要使用defaultActiveKey。同时使用短横线,不要使用驼峰
<script>
new Vue({
el: "#app",
data: {
currentKey: 0,
message: 'hello',
timer: null,
pages: [
]
},
mounted() {
// 绑定计时器
this.$nextTick(function () {
this.timer = setInterval(this.changeTab, 5000);
})
},
methods: {
callback(key) {
console.log(key);
this.currentKey = key;
// 先清空再绑定,结果手动切换之后,下次时间不够五秒的问题
clearInterval(this.timer)
this.timer = setInterval(this.changeTab, 5000);
},
// 定时器函数
changeTab () {
// 因为这里只有六个,所以最大为5。超过5时,转成0
if (this.currentKey == 5) {
this.currentKey = 0;
} else {
this.currentKey++;
}
}
}
})
</script>