项目需要,轮播图引入了vue-awesome-swiper这个组件,加入click事件,在获取数组元素进行跳转时候,遇到了奇怪的问题:
有时候第一个或者最后一个元素在点击时候,点击事件失效了,没打印出任何信息,但点击其他位置时候没有问题
问题代码如下:
1 | <swiper :options="swiperOption" ref="mySwiper" id="loopsCom"> |
1 | clkItem(index) { |
很奇怪,就只是某些左右滑动后,第一个或者最后一个无法响应点击事件,不知道是否是因为为了加载效果,就预先复制其他页面的效果导致的。
后面经过询问朋友及查看swiper的官网API,发现我们可以用如下这个api来响应点击事件。
解决问题的代码
1 | <swiper :options="swiperOption" ref="mySwiper" id="loopsCom" @click-slide="clkItem"> |
1 | clkItem(index, realIndex) { |
如下图打印输出:
1 | ShowerLoopsLargeCom.vue?0ebc:97 ==>>click loop item index = 1; realIndex = 0 |
用了@click-slide这个后,可以取到对应swiper真正的realIndex,但是比较奇怪的是对应的index,竟然是加1的,虽然奇怪,但是各种情况下轮播图点击没有问题了,用realIndex即可,时间关系先解决问题,暂不深究。
原创文章,欢迎转载,转载请注明:ifish.site
作者:JaydenZhou