vue使用Swiper踩坑解決避坑

更新時間：2023年05月15日 10:06:05 作者：hmy666

這篇文章主要為大家介紹了vue使用Swiper踩坑及解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

我的Swiper定義：

Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

<div class="nyswiper-container" ref="my_swiper">
    <div  class="mySwiperWrapper">
          <slot name="content"> </slot>
    </div>
  </div>

報錯信息：

看了官方文檔之后發(fā)現(xiàn)：

保留默認名class：swiper-container

修改之后：

<div class="swiper-container" ref="my_swiper">
    <div  class="mySwiperWrapper">
          <slot name="content"> </slot>
    </div>
  </div>

繼續(xù)報錯，還是什么那個錯。

查看GitHub

他說需要個wrapper，但是我已經(jīng)定義了wrapper了，只不過名字不是swiper-wraper,
后來還是把類名改回來，我本以為只要定義了外面的container，里面的類名可以隨便寫，只要符合層級關系就好。

最后還是改回來原來的類名：

<div class="swiper-container" ref="my_swiper">
    <div  class="swiper-wrapper">
          <slot name="content"> </slot>
    </div>
  </div>

最后不會報錯了：

其實我已經(jīng)使用很多次這個玩意了，之前是這樣定義的：可以正常運行。

<div ref="school_swiper" class="swiper-container_home">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide swiper_slide_home"
        v-for="(item, index) in imgList"
        :key="index"
      >
        <div>![](imgList[index])</div>
      </div>
    </div>
    <div class="swiper-pagination" style="color:#ffffff"></div>
  </div>

所以我覺得，外面的類名可以修改，但是wrapper類名不可以修改，因為你即使改了外面的類名，由于你通過refs拿到外面這個container了，然后初始化了Swiper，Swiper內部還是覺得你這樣的處理是對的。外面這個container我覺得主要是用來初始化用的，類名無需保留，這個和我看中文的swiper文檔寫的不一樣，它說要保留，可能目的就是為了讓用戶遵守它的規(guī)定，防止報錯吧。：

new Swiper(this.$refs.school_swiper, {
        loop: true, // 循環(huán)模式選項
        width: window.innerWidth * 1,
        //分頁器
        pagination: {
          el: ".swiper-pagination",
        },
        autoplay: {
          delay: 2000,
          disableOnInteraction: false, //用戶觸摸后靜止關閉
        },
      }));
    },

最后修訂swiper-slide類名也不能舍棄。。也要加上才能滑動，使用插槽時，直接在外面的組件中定義swiper-slide即可

以上就是vue使用Swiper踩坑：的詳細內容，更多關于vue使用Swiper踩坑：的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: