解決swiper在Element-ui的tabs標(biāo)簽頁切換時(shí)，swiper不生效，以及v-if和v-show不生效，還有左右箭頭切換按鈕點(diǎn)擊無效的情況。

情況一

observer:true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
observeParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper

官網(wǎng)給出的解決方案是，使用observer：swiper4的api地址:
https://www.swiper.com.cn/api/observer/218.html.

情況二

 if(this.activeName == 'second'){
    this.hallSwiper.destroy(false)
 }else if(this.activeName == 'first'){
      // 實(shí)例banner輪播
     this.hallSwiper = new this.$swiper(".hall-swiper", {
     mousewheel: true,
     loop: true, // 循環(huán)模式選項(xiàng)
     speed: 1000,
     observer:true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
     observeParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper
     autoplay: {
       delay: 3500,
       disableOnInteraction: false,
     },
     // 如果需要前進(jìn)后退按鈕
     navigation: {
       nextEl: ".swiper-button-next",
       prevEl: ".swiper-button-prev",
       // clickable: true
     },
     on:{
       destroy: function(){
         // alert('你銷毀了Swiper;');
       },
     },
   });
}

在切換Element-ui的tabs標(biāo)簽的時(shí)候，切換到?jīng)]有使用Swiper的頁面時(shí)銷毀Swiper:

this.hallSwiper.destroy(false)

再次切換回來時(shí)重新初始化：

 // 實(shí)例banner輪播
     this.hallSwiper = new this.$swiper(".hall-swiper", {
     mousewheel: true,
     loop: true, // 循環(huán)模式選項(xiàng)
     speed: 1000,
     observer:true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
     observeParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper
     autoplay: {
       delay: 3500,
       disableOnInteraction: false,
     },
     // 如果需要前進(jìn)后退按鈕
     navigation: {
       nextEl: ".swiper-button-next",
       prevEl: ".swiper-button-prev",
       // clickable: true
     },
     on:{
       destroy: function(){
         // alert('你銷毀了Swiper;');
       },
     },
   });

完美解決：在Element-ui種使用tabs標(biāo)簽頁和Swiper時(shí)，因?yàn)榍袚Qtabs出現(xiàn)Swiper無法使用或者左右箭頭切換失效問題。文章來源地址http://www.zghlxwxcb.cn/news/detail-613078.html

到了這里，關(guān)于解決swiper在Element-ui的tabs標(biāo)簽頁切換時(shí)，swiper不生效，以及v-if和v-show不生效，還有左右箭頭切換按鈕點(diǎn)擊無效的情況。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！