swiper——vue页面配合显示隐藏渲染两个轮播插件

swiper——vue页面配合显示隐藏渲染两个轮播插件

问题：显示隐藏

项目中使用vue v-show控制轮播盒子不同渲染，但是会出现第一次点击，轮播插件显示出现错误，具体表现为轮播子元素只剩下一个，且为缩小状态，需要多次切换显示轮播才能正常显示

解决： this.$nextick()

1.注意两个轮播盒子要使用不同的父元素，swiper-container不能用做最外层盒子

2.切换显示隐藏方法需要调用加载swiper方法

3.使用this.$nextTick()方法防止swiper方法初始化出现问题

4.方法切换显示轮播不需要在mounted页面初始化调用轮播事件

<button @click="showBtn1">显示第一个轮博</button>
<button @click="showBtn2">显示第二个轮博</button>
// 简化写，第一个轮播插件，根绝show1显示隐藏
<div class="long" v-show="show1">
  <div class="swiper-container">
   <ul class="swiper-wrapper">
   	<li class="swiper-slide flex" v-for="item in swiperInfo" :key="item.title"></li>
    </ul>
   </div>
  </div>
 
//第二个轮播插件，根绝show2显示隐藏
<div class="long1" v-show="show2">
  <div class="swiper-container">
    <ul class="swiper-wrapper">
      <li class="swiper-slide flex" v-for="item in swiperInfo1" :key="item.title"></li>
    </ul>
  </div>
</div>

//按钮方法显示并初始化第一个轮播，传入对应的轮播父元素类名
showBtn1 () {
	this.show1 = true
	this.show2 = false
	this.swiperBox('.long .swiper-container')
}
//按钮方法显示并初始化第二个轮播
showBtn2 () {
	this.show2 = true
	this.show1 = false
	this.swiperBox('.long1 .swiper-container')
}

// 轮播初始化方法，传入对应的轮播父元素类名
swiperBox (className) {
   this.$nextTick(() => {
     const swiper = new Swiper(className, {
       slidesPerView: 3,
       spaceBetween: 100,
       centeredSlides: true,
       loop: true,
       slideToClickedSlide: true,
       observeParents: true, // 修改swiper的父元素时，自动初始化swiper
       pagination: {
         el: '.swiper-pagination',
         clickable: true
       }
     })
     return swiper
   })
 }