vue一個元件引入多個swiper輪播可能引發的分頁器數量異常問題
阿新 • • 發佈:2019-01-07
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>
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,
})
}
(只為記錄,問題描述較模糊)