项目需求很简单,点击每张轮播图跳转到对应的链接,然而当loop设为true的时候,直接在swiper-slide绑定点击事件是失效的,而将loop设为false又不符合产品需求。
解决思路:
利用swiper的click事件,获取当前的轮播图的索引,从list中找到对应索引的url,再调用跳转方法
话不多说,直接上代码:
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide"
v-for="item in dataList"
:key="item.id">
<img :src="item.src">
</div>
</div>
</div>
data() {
var vm = this // 这一步很关键,用于在swiper内拿到vue变量
return {
swiperOption: {
loop: true,
on: {
click: function() {
var curIndex = this.realIndex // 这里的this指向的是swiper
var curUrl = vm.dataList[curIndex].url
vm.toFocusLink(curUrl)
}
}
},
dataList: [] // 数据
}
},
methods: {
// 链接跳转
toFocusLink: function(url) {
console.log(url)
}
}
踩坑随笔,不足之处,欢迎指教~