美文网首页
swiper在loop模式下当前的索引值不正确情况

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

作者: 李小_包 | 来源:发表于2019-03-06 18:38 被阅读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)
    }
  }
},

相关文章

网友评论

      本文标题:swiper在loop模式下当前的索引值不正确情况

      本文链接:https://www.haomeiwen.com/subject/agvxpqtx.html