美文网首页
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