After swiper turns on loop, click event does not respond
Take over the project of a resigned colleague, and then find that the click event will not respond after turning the page of the banner image, so I modified it. I found many methods online but couldn't achieve it.
The problem code is as follows
<swiper v-if=">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="" alt=""> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper>
The swiperOptions configuration in data() is as follows
swiperOptions: {
pagination: {
el: '.swiper-pagination'
},
loop: true,
autoplay: 5000,
speed: 950,
observer: true,
// When modifying swiper itself or child elements, automatically initialize swiper observeParents: true
// Some Swiper option/callback...
},After the loop configuration item is set to true, swiper will copy two more banners in the array, namely the first and last ones, so that the carousel will be smooth. However, when copying, the image content is copied, and the click event is not copied, so the click event will not work.
For example:
The carousel picture was originally 3 [a,b,c] but it was 5 [c1,a,b,c,a1] when executed
Finally, a solution was found: Use @click-slide but @click-slide can only be used on the swiper tag, so the click event cannot be directly passed, and can only be modified together.
<swiper v-if=">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="" alt=""> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper>
@click-slide On the swiper tag, you cannot directly access the value when the v-for loop is looped, but the parameters passed by @click-slide are sequenced, so in the click method, you can only use the index number in the array to get the value.
videoPlay(list){
//Convert the serial number of the banner graph obtained when clicked into the index value of the array let inx = list-1
// When the sequence number is 0, it is judged as the last bit of the array if(list == 0 ){
inx = -1
// When the sequence number is greater than array 1, it is judged as the first bit of the array }else if(list == +1){
inx = 0
}
//Take the value in the array let i = [inx]
(i)
}As mentioned earlier
The carousel picture was originally 3 [a,b,c] but it was 5 [c1,a,b,c,a1] when executed
So the index of this carousel graph becomes [c1,a,b,c,a1] ==> [0 1 2 3 4] 5 numbers The only ones that can be clicked normally before judgment are sequence 123 and the copied 0 and 4 cannot be clicked, while 0 is graph c and 4 is graph a need to go up and judge.
Click event invalid when swiper sets loop:true
When using swiper in the project, when setting loop:true, several slides will be cloned before and after slides, forming a loop, but the click event bound to the dom will not be copied, resulting in the copied slides clicks not jumping.
solve
Don't bind the click event to the dom, but call it in the on() callback function.
The code is as follows:
<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()" --> <img :src="" :data-itemid=""> </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 part:
swiperOption: {
slidesPerView: 3,
centeredSlides:true,
loop:true,
observer:true,
observeParents:true, // When the parent element of Swiper changes, swiper will be updated navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
on:{
transitionStart(){ // Triggered before starting translation // If it's the first one if( == 0){
(0); // Set the displacement to 0 }
},
click(e) {
// Use event proxy to get the clicked element, and use data syntax to get the attribute value of the element let url = ;
// Here this points to the carousel, so I declared outside _this is used to represent the vue instance _this.goInto(url); // Jump to the details page }
}
},
The above is personal experience. I hope you can give you a reference and I hope you can support me more.