解决swiper在Element-ui的tabs标签页切换时，swiper不生效，以及v-if和v-show不生效，还有左右箭头切换按钮点击无效的情况。-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决swiper在Element-ui的tabs标签页切换时，swiper不生效，以及v-if和v-show不生效，还有左右箭头切换按钮点击无效的情况。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

解决swiper在Element-ui的tabs标签页切换时，swiper不生效，以及v-if和v-show不生效，还有左右箭头切换按钮点击无效的情况。

情况一

observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

官网给出的解决方案是，使用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'){
      // 实例banner轮播
     this.hallSwiper = new this.$swiper(".hall-swiper", {
     mousewheel: true,
     loop: true, // 循环模式选项
     speed: 1000,
     observer:true,//修改swiper自己或子元素时，自动初始化swiper
     observeParents:true,//修改swiper的父元素时，自动初始化swiper
     autoplay: {
       delay: 3500,
       disableOnInteraction: false,
     },
     // 如果需要前进后退按钮
     navigation: {
       nextEl: ".swiper-button-next",
       prevEl: ".swiper-button-prev",
       // clickable: true
     },
     on:{
       destroy: function(){
         // alert('你销毁了Swiper;');
       },
     },
   });
}

在切换Element-ui的tabs标签的时候，切换到没有使用Swiper的页面时销毁Swiper:

this.hallSwiper.destroy(false)

再次切换回来时重新初始化：

 // 实例banner轮播
     this.hallSwiper = new this.$swiper(".hall-swiper", {
     mousewheel: true,
     loop: true, // 循环模式选项
     speed: 1000,
     observer:true,//修改swiper自己或子元素时，自动初始化swiper
     observeParents:true,//修改swiper的父元素时，自动初始化swiper
     autoplay: {
       delay: 3500,
       disableOnInteraction: false,
     },
     // 如果需要前进后退按钮
     navigation: {
       nextEl: ".swiper-button-next",
       prevEl: ".swiper-button-prev",
       // clickable: true
     },
     on:{
       destroy: function(){
         // alert('你销毁了Swiper;');
       },
     },
   });

完美解决：在Element-ui种使用tabs标签页和Swiper时，因为切换tabs出现Swiper无法使用或者左右箭头切换失效问题。文章来源地址https://www.toymoban.com/news/detail-613078.html

到了这里，关于解决swiper在Element-ui的tabs标签页切换时，swiper不生效，以及v-if和v-show不生效，还有左右箭头切换按钮点击无效的情况。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！