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,
})
}
(只为记录,问题描述较模糊)

本文记录了在Vue项目中使用Swiper组件遇到的问题:当页面同时存在轮播图与局部滚动两个Swiper实例时,轮播图分页器数量异常,等同于局部滚动项数。分析原因并提供了解决方案——通过明确设置pagination属性。
3049

被折叠的 条评论
为什么被折叠?



