[踏み込み]vue-cli 3でswiper 4のloop:trueの場合、クリックイベントは無効になります
4727 ワード
プロジェクトのニーズは簡単で、各ラウンドマップをクリックして対応するリンクにジャンプしますが、loopをtrueに設定すると、swiper-slideバインドクリックイベントは無効になり、loopをfalseに設定しても製品のニーズに合致しません.
解決構想:swiperのclickイベントを利用して、現在のマルチキャスト図のインデックスを取得して、listの中から対応するインデックスのurlを見つけて、更にジャンプ方法を呼び出します
あまり話さないで、直接コードをつけます.
随筆を踏んで、足りないところ、ご指導を歓迎します~
解決構想: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)
}
}
随筆を踏んで、足りないところ、ご指導を歓迎します~