Problem Description:

Swiper rotation can be clicked to see the details. Swiper’s loop attribute is true, and events cannot be triggered when we click the first image or swipe left to the last click

The reason:

Swiper’s infinite rotation automatically copies the first and last pages for rotation. However, since only the page is copied and the click event is not copied, the click event written by vUE will be invalid when the page comes back after a week.

Solutions:

In the < swiper > binding in the click event @ click. Native, then using this. In the event of binding refs. MySwiperRef. Refs. MySwiperRef. Refs. MySwiperRef. Swiper. RealIndex Get real index

@click.native: $emit(“click”.fn) $emit(“click”.fn) $emit(“click”.fn) $emit(“click”.fn)

<! --banner Swiper class="index-banner" :options="swiperOption" @click.native="bannerSwiperClick()" ref="mySwiperRef"> <swiper-slide v-for="(item,index) in bannerSwiperImg" :key="index"> <img width="100%" :src="item" alt=""> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper>Copy the code
methods: { bannerSwiperClick(){ ...... Const index = this. $refs. MySwiper. Swiper. RealIndex / / get the subscript... }Copy the code