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();
    },

 

最新回复(0)
/jishujlMdBVHNEY0j4XN0EEQELdQrCcbRPp4b_2BLJ_2BDw_3D_3D4488970
8