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

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)
    }
  }
},
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容