©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>解决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(); },