ant design vue tabs 标签页的轮播效果

<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>