1. 程式人生 > >vue一個元件引入多個swiper輪播可能引發的分頁器數量異常問題

vue一個元件引入多個swiper輪播可能引發的分頁器數量異常問題

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

這裡寫圖片描述
(只為記錄,問題描述較模糊)