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