vue 中 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图  需要走上方判断.