vue使用swiper的時候第二輪事件不會觸發(fā)問題
使用swiper的時候第二輪事件不會觸發(fā)
首先說明導致這樣的結(jié)果的原因：官方解釋是輪播在循環(huán)輪播的時候他是前面復制一份后面復制一份，這樣看起來就是無縫滾動，但是在復制的時候不會復制事件，所以會有事件不會觸發(fā)
解決這種有兩種方法
- 第一種loop為false,這樣沒有復制元素自然也不存在復制事件這一說法
- 第二種重新寫options
第一步定義ref跟重新定義options
data里面是不需要的
計算屬性里面寫個事件swiper事件是原swiper自帶的在點擊的時候computed會自動監(jiān)聽跟watch差不多（緩存），然后讓其指向我們當前使用的swiper讓其有原生的方法，swiper里面有個on屬性 里面是綁定事件讓其執(zhí)行swiper方法，返回當前dom,常用的獲取id的方式
– clickedSlide當前輪播dom
– activeIndexloop模式下注意該值會被加上復制的slide數(shù)
– realIndex與activeIndex不同的是，在loop模式下不會將復制的塊的數(shù)量計算在內(nèi)。
常用獲取的方法 其余看文檔
切記：最后要將optins返回 然后綁定值options
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
swiperOption() {
let option = {
slidesPerView: 5,
// height: 'auto',
autoplay: {
delay: 3000,
stopOnLastSlide: false,
/* 觸摸滑動后是否繼續(xù)輪播 */
disableOnInteraction: false
},
spaceBetween: 1,
// observer: true,//修改swiper自己或子元素時，自動初始化swiper
// observeParents: true,//修改swiper的父元素時，自動初始化swiper
direction: "vertical", //設置垂直滾動方向
speed: 800,//滾動速度
grabCursor: true,
loop: true,//循環(huán)滾動
on: {
click: (swiper) => {
console.log(this.date[this.swiper.clickedSlide.getAttribute('data-index')].userId);
this.$store.commit("showDialog5", this.date[this.swiper.clickedSlide.getAttribute('data-index')].userId);
},
},
}
return option
}
},
swiper點擊事件無效的問題
現(xiàn)象
添加在swiper-slide里面的點擊事件有時能點擊有時不能點擊
分析
只有在設置了loop:true的情況下才會出現(xiàn)這個問題
原因
swiper通過復制dom節(jié)點來實現(xiàn)無限滾動，但沒有復制元素上綁定的事件
解決方法
在輪播配置里面定義事件，即options里面，這樣的話可以解決不能點擊的問題
但有時候需求會復雜一點，比如需要點擊輪播圖里面特定元素，做出不同的響應事件，這時候就需要做一些另外的工作來輔助完成。
首先要將 preventLinksPropagation設置成false，防止冒泡。
然后通過判斷點擊的元素的類名來響應不同的事件，這個時候，我們可能需要給事件傳遞參數(shù)，但是需要傳遞的參數(shù)是通過v-for生成的，如何傳遞，這里我的做法是將參數(shù)放到元素的自定義屬性里面 然后再獲取自定義屬性。
<swiper ref="mySwiper" :options="swiperOption">
swiperOption: {
? ? ? ? spaceBetween: 10,
? ? ? ? loop: true,
? ? ? ? slidesPerView: 'auto',
? ? ? ? loopedSlides: 3,
? ? ? ? slidesOffsetBefore: (document.body.clientWidth * 0.2) / 2,
? ? ? ? preventLinksPropagation: false,
? ? ? ? on: {
? ? ? ? ? click: (v) => {
? ? ? ? ? ? const item = {
? ? ? ? ? ? ? a: v.target.getAttribute('data-a'),
? ? ? ? ? ? ? b: v.target.getAttribute('data-b'),
? ? ? ? ? ? ? c: v.target.getAttribute('data-c')
? ? ? ? ? ? }
? ? ? ? ? ? switch (v.target.className) {
? ? ? ? ? ? ? case 'a':
? ? ? ? ? ? ? ? this.handlegg(0)
? ? ? ? ? ? ? ? break
? ? ? ? ? ? ? case 'b':
? ? ? ? ? ? ? ? this.handlegg(1, item)
? ? ? ? ? ? ? ? break
? ? ? ? ? ? ? case 'c':
? ? ? ? ? ? ? ? this.handlegg(2, item)
? ? ? ? ? ? ? ? break
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? }輪播圖里面某元素
<div v-else class="xxx"> ?<div? ? ? class="c" ? ? :data-a="item.a"? ? ? :data-b="item.b"? ? ? :data-c="item.c" ? ? ></div> ? <div>立即開通</div> </div>
問題解決。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue init webpack 下載依賴卡住不動的問題
這篇文章主要介紹了解決vue init webpack 下載依賴卡住不動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本篇文章主要介紹了基于vue.js 2.x的虛擬滾動條的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue.js 的內(nèi)聯(lián)表達式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。如果涉及更復雜的邏輯，你應該使用計算屬性。這篇文章我們將一起學習vue.js的計算屬性。什么是計算屬性，為什么要用這東西呢？通過下面這篇文章你將解決這些問題，下面來一起看看吧。2016-09-09
今天小編就為大家分享一篇修改vue+webpack run build的路徑方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue使用NProgress進度條的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
學習vue有一段時間了，最近使用vue做了一套后臺管理系統(tǒng)，其中使用最多就是遞歸組件，下面這篇文章主要給大家介紹了關(guān)于Vue利用遞歸實現(xiàn)樹形菜單的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了對類Vue的MVVM前端庫的實現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
解決vite項目Uncaught Syntaxerror:Unexpected token＞vue項
這篇文章主要介紹了解決vite項目Uncaught Syntaxerror:Unexpected token＞vue項目上線白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在本篇文章里小編給大家整理了關(guān)于vue下canvas裁剪圖片實例講解內(nèi)容，需要的朋友們可以參考下。2020-04-04
Vue實現(xiàn)模糊查詢-Mysql數(shù)據(jù)庫數(shù)據(jù)
這篇文章主要介紹了基于Vue實現(xiàn)Mysql數(shù)據(jù)庫數(shù)據(jù)模糊查詢,下面文章我們主要實現(xiàn)的是輸入框中輸入數(shù)據(jù)，根據(jù)輸入的結(jié)果模糊搜索數(shù)據(jù)庫對應內(nèi)容，實現(xiàn)模糊查詢，感興趣的小伙伴可以進入文章我們一起學習2021-12-12