vue中swiper开启loop后,点击事件不响应的解决方案
作者:默赜
swiper开启loop后,点击事件不响应
接手离职同事的项目,然后发现banner图翻页后会出现点击事件不响应,于是修改,网上找了很多方法都无法实现
问题代码如下
<swiper v-if="bannerArr.length>0" class="home-swper" ref="mySwiper" :options="swiperOptions"> <swiper-slide v-for="(list,inx) in bannerArr" :key="inx"> <img class="banner-img" @click="videoPlay(list)" :src="list.bannerPhotoPath" alt=""> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper>
data()中的swiperOptions配置如下
swiperOptions: { pagination: { el: '.swiper-pagination' }, loop: true, autoplay: 5000, speed: 950, observer: true, // 修改swiper自己或子元素时,自动初始化swiper observeParents: true // Some Swiper option/callback... },
loop配置项设置为true后,swiper 会将数组中的banner多复制出来两张,分别是第一张和最后一张,这样轮播起来才会流畅,但是复制的时候值复制了图片内容 并没有吧点击事件复制了,所以会出现点击事件不起效的现象.
例如:
轮播图原本是3张[a,b,c] 但是执行的时候是5张[c1,a,b,c,a1]
最终找到了一个解决办法 使用@click-slide 但@click-slide 只能在swiper标签上使用,所以点击事件不能直接传值 只能一同修改.
<swiper v-if="bannerArr.length>0" class="home-swper" ref="mySwiper" :options="swiperOptions" @click-slide="videoPlay"> <swiper-slide v-for="(list,inx) in bannerArr" :key="inx"> <img class="banner-img" :src="list.bannerPhotoPath" alt=""> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper>
@click-slide 在swiper标签上,就无法直接渠道v-for循环时的直接取的值了,但@click-slide传的参数有序列,遂点击方法中只能通过对比数组中的索引号来进行取值
videoPlay(list){ //将点击时获取的的banner图的序列号转为数组的索引值 let inx = list-1 //当序列号是0的时候判为数组的最后一位 if(list == 0 ){ inx = this.bannerArr.length-1 //当序列号是大于数组1的时候判为数组的第一位 }else if(list == this.bannerArr.length+1){ inx = 0 } //取数组中的值 let i = this.bannerArr[inx] console.log(i) }
前面说到
轮播图原本是3张[a,b,c] 但是执行的时候是5张[c1,a,b,c,a1]
所以这个轮播图的索引就变成了 [c1,a,b,c,a1] ==> [0 1 2 3 4 ] 5个数 未判断前能正常点击的只有 序列123 而复制出来的0和4则无法点击 ,而0是c图 4则是a图 需要走上方判断.
swiper设置loop:true时点击事件失效
项目中使用 swiper 时,设置 loop:true时,slides前后会clone若干个slide,从而形成一个环路,但是却不会复制绑定在dom上的click事件,导致复制的slides点击不会跳转。
解决
不要将click事件绑定在dom上,而是在放在 on() 回调函数中调用。
代码如下:
<div class="swiper-father swiper-hot"> <swiper :options="swiperOption" ref="mySwiper" v-if="homeData5"> <!-- slides --> <swiper-slide v-for='(item,index) in homeData[5]' :key="index"> <!-- @click="goInto(item.id)" --> <img :src="item.imgUrl" :data-itemid="item.id"> </swiper-slide> </swiper> <div class="swiper-button-prev btn-swiper swiper-button" slot="button-prev"></div> <div class="swiper-button-next btn-swiper swiper-button" slot="button-next"></div> </div>
data部分:
swiperOption: { slidesPerView: 3, centeredSlides:true, loop:true, observer:true, observeParents:true, // 当Swiper的父元素变化时,会更新swiper navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, on:{ transitionStart(){ // 开始translate之前触发 // 如果是第一张 if(this.activeIndex == 0){ this.setTranslate(0); // 设置位移为0 } }, click(e) { // 使用e.target事件代理获取点击的元素,通过data语法获取元素的属性值 let url = e.target.dataset.itemid; // 这里的this指向轮播,所以我在外边声明了_this用来代表vue实例 _this.goInto(url); // 跳转到详情页 } } },
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。