快捷導(dǎo)航

vue中swiper開(kāi)啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案

更新時(shí)間：2022年09月08日 16:21:19 作者：默賾

這篇文章主要介紹了vue中swiper開(kāi)啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

swiper開(kāi)啟loop后,點(diǎn)擊事件不響應(yīng)

接手離職同事的項(xiàng)目,然后發(fā)現(xiàn)banner圖翻頁(yè)后會(huì)出現(xiàn)點(diǎn)擊事件不響應(yīng),于是修改,網(wǎng)上找了很多方法都無(wú)法實(shí)現(xiàn)

問(wèn)題代碼如下

?? ?<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自己或子元素時(shí)，自動(dòng)初始化swiper
?? ??? ??? ??? ?observeParents: true
?? ??? ??? ??? ?// Some Swiper option/callback...
?? ??? ??? ?},

loop配置項(xiàng)設(shè)置為true后,swiper 會(huì)將數(shù)組中的banner多復(fù)制出來(lái)兩張,分別是第一張和最后一張,這樣輪播起來(lái)才會(huì)流暢,但是復(fù)制的時(shí)候值復(fù)制了圖片內(nèi)容并沒(méi)有吧點(diǎn)擊事件復(fù)制了,所以會(huì)出現(xiàn)點(diǎn)擊事件不起效的現(xiàn)象.

例如：

輪播圖原本是3張[a,b,c] 但是執(zhí)行的時(shí)候是5張[c1,a,b,c,a1]

最終找到了一個(gè)解決辦法使用@click-slide 但@click-slide 只能在swiper標(biāo)簽上使用,所以點(diǎn)擊事件不能直接傳值只能一同修改.

<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標(biāo)簽上,就無(wú)法直接渠道v-for循環(huán)時(shí)的直接取的值了,但@click-slide傳的參數(shù)有序列,遂點(diǎn)擊方法中只能通過(guò)對(duì)比數(shù)組中的索引號(hào)來(lái)進(jìn)行取值

videoPlay(list){
?? ??? ??? ?//將點(diǎn)擊時(shí)獲取的的banner圖的序列號(hào)轉(zhuǎn)為數(shù)組的索引值
?? ??? ??? ?let inx = list-1
?? ??? ??? ?//當(dāng)序列號(hào)是0的時(shí)候判為數(shù)組的最后一位
?? ??? ??? ?if(list == 0 ){
?? ??? ??? ??? ?inx = this.bannerArr.length-1
?? ??? ??? ?//當(dāng)序列號(hào)是大于數(shù)組1的時(shí)候判為數(shù)組的第一位
?? ??? ??? ?}else if(list == this.bannerArr.length+1){
?? ??? ??? ??? ?inx = 0
?? ??? ??? ?}
?? ??? ??? ?//取數(shù)組中的值
?? ??? ??? ?let i = this.bannerArr[inx]
? ? ? ? ? ? console.log(i)
? ? ? ? }

前面說(shuō)到

輪播圖原本是3張[a,b,c] 但是執(zhí)行的時(shí)候是5張[c1,a,b,c,a1]

所以這個(gè)輪播圖的索引就變成了 [c1,a,b,c,a1] ==> [0 1 2 3 4 ] 5個(gè)數(shù) 未判斷前能正常點(diǎn)擊的只有序列123 而復(fù)制出來(lái)的0和4則無(wú)法點(diǎn)擊 ,而0是c圖 4則是a圖需要走上方判斷.

swiper設(shè)置loop:true時(shí)點(diǎn)擊事件失效

項(xiàng)目中使用 swiper 時(shí)，設(shè)置 loop:true時(shí)，slides前后會(huì)clone若干個(gè)slide，從而形成一個(gè)環(huán)路，但是卻不會(huì)復(fù)制綁定在dom上的click事件，導(dǎo)致復(fù)制的slides點(diǎn)擊不會(huì)跳轉(zhuǎn)。

解決

不要將click事件綁定在dom上，而是在放在 on() 回調(diào)函數(shù)中調(diào)用。

代碼如下：

<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, // 當(dāng)Swiper的父元素變化時(shí)，會(huì)更新swiper
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    on:{
        transitionStart(){ // 開(kāi)始translate之前觸發(fā)
            // 如果是第一張
            if(this.activeIndex == 0){
                this.setTranslate(0); // 設(shè)置位移為0
            }
        },
        click(e) {
        	// 使用e.target事件代理獲取點(diǎn)擊的元素，通過(guò)data語(yǔ)法獲取元素的屬性值
            let url = e.target.dataset.itemid;
            // 這里的this指向輪播,所以我在外邊聲明了_this用來(lái)代表vue實(shí)例
            _this.goInto(url); // 跳轉(zhuǎn)到詳情頁(yè)
        }
    }
},

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: