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

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值