解决vue-awesome-swiper点击事件失效的问题 ===“版本号(vue-awesome-swiper”: "^3.1.0)
最新做项目使用了 vue-awesome-swiper(3.1.0版本)轮播插件遇到的坑。
在使用loop: true模式下: 动态循环数据 ,轮播第一遍是点击事件是正常的,轮播第二遍的时候点击事件就失效了 点击事件不起作用 通过查看api , loop模式下会在slides前后复制若干个 slide 但是这个复制只是针对 dom 元素不会带上之前的绑定事件的 , 所以不能在dom上 直接绑定事件 绑定则无效,
页面样式swiper的标签
swiper里面的内容是这样的
<swiper class="swiper-line" ref="myswiper" :options="SWIPER_OPTIONS" v-if="swiperFlag" >
<swiper-slide class="swiper-slide-tab" v-for="(item, index) in defaultList":key="index">
<div class="top-tips">
<div class="tips-word">
<div>
这是第{
{item.num}}个人
</div>
</div>
<div class="tips-btn" @click="handleInvite">
{
{ item.flag === 0 ? "立即邀请" : "邀请更多" }}
</div>
</div>
</swiper-slide>
</swiper>
在项目运行的时候就会发现,点击立即邀请 @click="handleInvite"这个事件在第一次轮播是正常的,当轮播完毕之后你就会发现,排在第一个位置的轮播图中点击事件会失效,根本不会触发。
轮播参数设置
SWIPER_OPTIONS() {
return {
slidesPerView: 'auto',
spaceBetween: 5,
loop: true,
direction: 'vertical',
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
autoplay: {
delay: 2000,
},
on: {
click: function () {
vm.handleInvite()
}
}
}
这种情况下,整个swiper-slide区域会会触发点击事件
如果要求在在swiper-slide某一个区域有点击事件
SWIPER_OPTIONS() {
let _this = this;
return {
slidesPerView: 'auto',
spaceBetween: 5,
loop: true,
direction: 'vertical',
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true, //修改swiper的父元素时,自动初始化swiper
autoplay: {
delay: 2000
},
on: {
click: function(e) {
_this.slideClick(e, this.realIndex);
}
}
};
}
然后再methods中增加一个方法,点击区域通过通过e.taeget找到那个元素的,进行事件绑定
//轮播中莫某一区域滑动
slideClick(e, index) {
console.log(e.target.innerText);
if (e.target.innerText == '邀请更多' || e.target.innerText == '立即邀请') this.handleInvite();
},