**问题:**当我直接在swiper组件里的div上放@click事件时,点击事件偶尔会失效;
原因: 当swiper设置loop=true时,会生成虚拟slide进行填充,对这些虚拟slide元素进行操作无效;
解决方法:
将点击事件以下代码放进swiperOption里
on: {
click(e) {
self.slideChange(e, this.realIndex);
},
touchStart() {
self.touchstart();
},
touchMove() {
self.touchmove();
},
touchEnd() {
self.touchend();
},
},
整体展示:
swiperOption: {
direction: 'horizontal', // 平行方向移动
slidesPerView: 1, // 每次滑动图片一张
// 设定初始化时slide的索引
initialSlide: 0,
// 循环
loop: true,
// 自动播放
autoplay: {
// 隔×秒自动滑动一次
delay: 1500,
// 设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。默认为true
disableOnInteraction: false,
},
// 设置轮播切换效果
effect: 'slide',
// 轮播切换动速度
speed: 800,
// 小手掌抓取滑动
grabCursor: true,
preventLinksPropagation: false,
on: {
click(e) {
self.slideChange(e, this.realIndex);
},
touchStart() {
self.touchstart();
},
touchMove() {
self.touchmove();
},
touchEnd() {
self.touchend();
},
},
},