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 刪除掉，切換回來的時候再載入出來，該問題也可以得到解決。