快捷導(dǎo)航

vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問(wèn)題

更新時(shí)間：2022年09月08日 15:42:06 作者：小菜鳥(niǎo)學(xué)代碼··

這篇文章主要介紹了vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)

首先說(shuō)明導(dǎo)致這樣的結(jié)果的原因：官方解釋是輪播在循環(huán)輪播的時(shí)候他是前面復(fù)制一份后面復(fù)制一份，這樣看起來(lái)就是無(wú)縫滾動(dòng)，但是在復(fù)制的時(shí)候不會(huì)復(fù)制事件，所以會(huì)有事件不會(huì)觸發(fā)

解決這種有兩種方法

第一種loop為false,這樣沒(méi)有復(fù)制元素自然也不存在復(fù)制事件這一說(shuō)法
第二種重新寫(xiě)options

第一步定義ref跟重新定義options

data里面是不需要的

計(jì)算屬性里面寫(xiě)個(gè)事件swiper事件是原swiper自帶的在點(diǎn)擊的時(shí)候computed會(huì)自動(dòng)監(jiān)聽(tīng)跟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)擊事件無(wú)效的問(wèn)題

現(xiàn)象

添加在swiper-slide里面的點(diǎn)擊事件有時(shí)能點(diǎn)擊有時(shí)不能點(diǎn)擊

分析

只有在設(shè)置了loop:true的情況下才會(huì)出現(xiàn)這個(gè)問(wèn)題

原因

swiper通過(guò)復(fù)制dom節(jié)點(diǎn)來(lái)實(shí)現(xiàn)無(wú)限滾動(dòng)，但沒(méi)有復(fù)制元素上綁定的事件

解決方法

在輪播配置里面定義事件，即options里面，這樣的話可以解決不能點(diǎn)擊的問(wèn)題

但有時(shí)候需求會(huì)復(fù)雜一點(diǎn)，比如需要點(diǎn)擊輪播圖里面特定元素，做出不同的響應(yīng)事件，這時(shí)候就需要做一些另外的工作來(lái)輔助完成。

首先要將 preventLinksPropagation設(shè)置成false，防止冒泡。

然后通過(guò)判斷點(diǎn)擊的元素的類名來(lái)響應(yīng)不同的事件，這個(gè)時(shí)候，我們可能需要給事件傳遞參數(shù)，但是需要傳遞的參數(shù)是通過(guò)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>立即開(kāi)通</div>
</div>

問(wèn)題解決。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: