vue-awesome-swiper事件
时间: 2023-10-11 09:06:31 浏览: 56
vue-awesome-swiper是将swiper进行封装的Vue插件。在使用vue-awesome-swiper时,如果开启了循环轮播(loop属性),并且为每个轮播页绑定了事件,会出现事件无法正常监听的问题。为了解决这个问题,可以使用Swiper.js本身提供的事件绑定机制,将原代码中通过vue指定绑定的事件监听器改为在Swiper初始选项中绑定。具体调整后的代码可参考以下示例:
```javascript
data() {
return {
swiperOption: {
loop: true, // 循环
on: {
click: (e) => { // 点击小图, 大图对应切换
const index = this.pngListNoLabel.findIndex((i) => i.imgSrc === e.target.attributes.src.nodeValue);
this.swiper.realIndex = index;
this.swiper.activeIndex = index;
this.swiper.slideTo(index);
this.$emit('setBigIndex', index);
},
},
},
};
},
```