swiper在loop模式下当前的索引值不正确情况

2019-03-06  本文已影响0人  李小_包

1、swiper在loop为false的情况下

需要获取当前的索引值:

this.active = this.activeIndex 

2、swiper在loop为true的情况下

this.active = $('.swiper-slide-active').attr('data-swiper-slide-index')

或:

this.active = this.realIndex

3html结构:

<swiper :options="swiperOption">
  <swiper-slide class="slider"></swiper-slide>
  <swiper-slide class="slider"></swiper-slide>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
</swiper>

4、data数据结构:

active: 0,
swiperOption: {
  slidesPerView: 1,
  spaceBetween: 20,
  initialSlide: 0,
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  on: {
    slideChangeTransitionEnd() {
      this.active = $('.swiper-slide-active').attr('data-swiper-slide-index')
      console.log('loop:false模式:', this.activeIndex)
      console.log('loop:true模式1:', this.active)
      console.log('loop:true模式2:', this.realIndex)
    }
  }
},
上一篇下一篇

猜你喜欢

热点阅读