博客

问题：

项目中使用 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); // 跳转到详情页
        }
    }
},