wh3845348
99887744
采纳率100%
2019-04-25 17:00 阅读 6.3k

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

40

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条回答 默认 最新

  • 已采纳
    qq_36942738 隔壁老陈你瞅啥 2019-04-25 17:29

    在页面渲染出来的时候声明一个函数去调用这个 在vue里面定义一个object对象 通过这个函数将swiper赋值给这个object对象

    然后在别的函数里面通过this.对象名.activeIndex就可以拿到了
    图片说明

    watch事件监听swiper的acticeIndex
    图片说明

    然后在函数里面就可以拿到vue对象内置的swiper对象的activeIndex了

    点赞 评论 复制链接分享
  • yiqiangguyong 取个昵称想半天 2019-04-25 17:26

    在页面渲染出来的时候声明一个函数去调用这个 在vue里面定义一个object对象 通过这个函数将swiper赋值给这个object对象 然后在别的函数里面通过this.对象名.activeIndex就可以拿到了!

    图片说明

    监听index变化去请求to_ajax函数就可以变更你想要的flag

    点赞 评论 复制链接分享

相关推荐