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
})
}