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

这里写图片描述
(只为记录,问题描述较模糊)

Logo

前往低代码交流专区

更多推荐