wh3845348
99887744
2019-04-25 17:00

vue使用swiper组件获得activeIndex后,如何实现实时监听activeIndex,如果发生变化则设置flag属性为false

40
  • node.js
  • html5
  • vue.js

vue使用swiper组件获得activeIndex后,如何实现实时监听activeIndex,如果发生变化则设置flag属性为false

      <swiper :options="swiperOption" ref="Myswper">
        <swiper-slide v-for="card in itemcard" :key="card.id">
          <img>//循环数据展示
        </swiper-slide>
      </swiper>
  data () {
    return {
      // swiper默认配置
      swiperOption: {
        slidesPerView: 'auto',
        spaceBetween: 30,
        centeredSlides: true,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.activeIndex)
                        // 切换结束时,告诉我现在是第几个slide
          }
        }
      }
     }
    }
watch: {
        实现监听this.$refs.Myswper.swiper.activeIndex发生变化执行赋值动作
}

由于vue不能监听到swiper中的activeIndex,也不能监听到ref的变动,请问如何才能实现想要的效果?

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

2条回答