vue一个组件引入多个swiper轮播可能引发的分页器数量异常问题
index.vue 引用slider.vue(初始化swiper实例的组件)两次的时候:1. swiper版本 "swiper": "^3.4.2",2. 在一个页面中使用两个swiper实例时,一个轮播,一个局部滚动,有时会出现轮播图分页器数量异常,该数量等于第二个局部滚动内item数量3. swiper初始化过程(vue中),当pagination属性不传递时默认为.swi
·
index.vue 引用slider.vue(初始化swiper实例的组件)两次的时候:
1. swiper版本 "swiper": "^3.4.2",
2. 在一个页面中使用两个swiper实例时,一个轮播,一个局部滚动,有时会出现轮播图分页器数量异常,该数量等于第二个局部滚动内item数量
3. swiper初始化过程 (vue中),当pagination属性不传递时默认为.swiper-pagination
。一个页面中两个swiper都未传递时,pagination在初始化时会出现异常(如下图),
4. 一个解决办法是:因为局部滚动不需要分页器,因此引入的时候<slider class="collection-slider" :sliderType="1" :index="index" :pagination='""'></slider>
,pagination传入空字符串
if(this.sliderType === 0){
this.banner = new Swiper(_slider,{
slidesPerView: 1,
pagination: self.pagination,
autoplay: self.autoplay,
onSlideChangeEnd: _onSlideChangeEnd,
observeParents: true,
observer: true,
direction:'horizontal'
})
}
else if(this.sliderType === 1){
this.slider = new Swiper(_slider,{
slidesPerView: 'auto',
pagination: self.pagination,
scrollbar: self.scrollbar,
})
}
(只为记录,问题描述较模糊)
更多推荐
已为社区贡献1条内容
所有评论(0)