现象: 添加在swiper-slide里面的点击事件有时能点击有时不能点击
分析:只有在设置了loop:true的情况下才会出现这个问题
原因:swiper通过复制dom节点来实现无限滚动,但没有复制元素上绑定的事件
解决方法:在轮播配置里面定义事件,即options里面,这样的话可以解决不能点击的问题
但有时候需求会复杂一点,比如需要点击轮播图里面特定元素,做出不同的响应事件,这时候就需要
做一些另外的工作来辅助完成。
首先要将 preventLinksPropagation设置成false,防止冒泡。
然后通过判断点击的元素的类名来响应不同的事件,这个时候,我们可能需要给事件传递参数,
但是需要传递的参数是通过v-for生成的,如何传递,这里我的做法是将参数放到元素的自定义属性里面
然后再获取自定义属性。
<swiper ref="mySwiper" :options="swiperOption">
swiperOption: {
spaceBetween: 10,
loop: true,
slidesPerView: 'auto',
loopedSlides: 3,
slidesOffsetBefore: (document.body.clientWidth * 0.2) / 2,
preventLinksPropagation: false,
on: {
click: (v) => {
const item = {
a: v.target.getAttribute('data-a'),
b: v.target.getAttribute('data-b'),
c: v.target.getAttribute('data-c')
}
switch (v.target.className) {
case 'a':
this.handlegg(0)
break
case 'b':
this.handlegg(1, item)
break
case 'c':
this.handlegg(2, item)
break
}
}
}
}
轮播图里面某元素
<div v-else class="xxx">
<div
class="c"
:data-a="item.a"
:data-b="item.b"
:data-c="item.c"
></div>
<div>立即开通</div>
</div>
问题解决。