最近在做swiper轮播图的时候遇到了一个问题，记录一下
问题描述：loop:true的情况下轮播图左滑，最后一张轮播图点击事件无法触发
问题分析：节点被复制，绑定时间不能被复制
错误示例：
<swiper ref="mySwiper" :options="swiperOption" class='swiper_container'>
<swiper-slide v-for(index,item) in datalist :key='index'>
<img :src="item.imgUrl" alt @click='goDetail(index.item)'/> // 当loop：true时，这种绑定点击事件会有问题
</swiper-slide>
<swiper>
解决方法：
html部分：
<swiper ref="mySwiper" :options="swiperOption" class='swiper_container'>
<swiper-slide v-for(index,item) in datalist :key='index' ：data-href='fun_str(item)'> // data-href用来获取item数据
<img :src="item.imgUrl" alt/>
</swiper-slide>
<swiper>
js部分：
data(){
return{
swiperOption:{
loop:true
}
}
}
computed: {
// 获取swiper实例
swiper(){
return this.$refs.mySwiper.$swiper
},
},
mounted:{
let that = this
this.swiper.on('click',function(){
/ / 这里的this是swiper的实例
let item = JSON.parse(this.clickedSlide.attributes["data-href"].nodeValue)
const clickedIndex = this.realIndex;
// 这里的that是Vue的实例
that.goDetail(clickedIndex,item);
})
},
methods: {
// 处理item数据返回给swiper实例
func_str(item){
return JSON.stringify(item);
},
// 点击事件
goDetail(index,item){
// 跳转方法
}
}
本文地址：https://blog.csdn.net/wangxu000000/article/details/109386260
