直接使用两个swiper插件,pagination小圆点会出现各种问题,例如滑动跟随另一个轮播图.
解决方法如下:
1.在home.vue(需要用两个插件的页面)自定义属性isShow
//第一个轮播图
<swiper v-if="headCarou.length>0" :isShow="head"></swiper>
//第二个轮播图
<swiper v-if="headCarou.length>0" :isShow="foot"></swiper>
//实例化中声明变量
data() {
return {
head:true,
foot:false
};
},
2.在swiper.vue组件中接收参数isShow
//接收父组件参数
props: ["carouselArr","isShow"]
3.swiper组件中的swiper标签设置自定义属性:option,并根据isShow做三元判断
<div class="swiperBox">
//如果是true,值为swiperOptions,否则为swiperOption
<swiper :options="isShow?swiperOptions:swiperOption">
<swiper-slide>
</swiper-slide>
</swiper>
</div>
4.分别实例化两个swiper
data(){
return{
carArr:[],
//实例化轮播图,根据上面自定义属性option的值
swiperOption:{
// init:false,
loop:true,
pagination:{
el:'.swiper-pagination'
}
},
//实例化第二个轮播图
swiperOptions:{
loop:true,
pagination:{
el:'.swiper-pagination'
}
}
}
},
网友评论