vue swiper 组件切换tab后自动轮播失效，手动滑一下才自动轮播生效的问题

vue swiper 组件切换tab后自动轮播失效，手动滑一下才自动轮播生效的问题

在网上找了好多解决方案

类似于 {

​ observer:true

​ observerParents:true

} 这两个配置，设置和没设置没有任何却别，不解决问题，不生效

1.问题产生原因

轮播图自动轮播需要通过settimeout记录轮播到那一帧与这一帧的时间戳，来回切换tab导致这部分轮播组件的dom消失又显示，因此settimeout触发器消失，无法知道下一帧到哪里，所以自动轮播停止。

2. 解决方案

• 不需要keep-alive缓存的情况：每一次切换tab，重新渲染组件，不要缓存，这样轮播图每次进页面会初始化一次，即可解决问题

• 需要 keep-alive 缓存：比如组件套在列表里，列表需要缓存，而轮播也受到外层keep-alive的影响。此时看代码

  ```javascirpt
      dom 部分 简写
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide >
              ......
        </swiper-slide>
      </swiper>
  
  
      computed:{
        swiper(){
           return this.$refs.mySwiper.swiper 
        }  
      },
      activated(){
          this.swiper.slideTo(0,0) 参数：跳转到那个图，时间是多少
          this.swiper.autoplay.start() 开始轮播
      },
      deactivated(){
          this.swiper.autoplay.stop() 停止轮播
      }
      逻辑就是在切换tab时将当前tab的轮播图暂停，目标页轮播图开启
      this.swiper.slideTo(0,0) 的目的是解决在轮播图轮播中切换tab导致轮播图自动切换死掉的问题，相当于初始化一下。
  
  
  ```
  

• 暴力一点，在切换tab时直接把该部分组件dom 删除掉，切换回来的时候再加载出来，该问题也可以得到解决。