1. 程式人生 > >vue-awesome-swiper 手記

vue-awesome-swiper 手記

一、獲取到swiper物件使用方法的問題

因為在vue上使用swiper是以引入元件的方式直接使用

所以要獲取到swiper物件才能夠去呼叫它的一些方法,,,,比如slideTo() 之類的。。。。

         <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="(item, index) of popData.imgs" :key="index">
              <img class="room-img preview-img" :src="item" @click="showRoomImg(index)"/>
            </swiper-slide>
            <div class="swiper-pagination slid-pagination"  slot="pagination"></div>
          </swiper>

 在swiper元件上加上ref屬性

 computed: {
    mySwiper () {
      return this.$refs.mySwiper.swiper
    }
  }

在計算屬性裡面可以返回到一個swiper物件  

this.mySwiper.slideTo(0)

 然後可以正常呼叫方法

 

二、關於vue-awesome-swiper隱藏狀態下的一些問題

問題描述:專案中想做一個隱藏的彈層,在特定情況下顯示彈層,而swiper在彈層上,初始化的時候是隱藏的,在彈層彈出的時候,swiper無法滑動

解決辦法:

swiperOption選項中新增兩項

  observer: true, // 修改swiper自己或子元素時,自動初始化swiper
  observeParents: true // 修改swiper的父元素時,自動初始化swiper

這兩個選項貌似存在版本的問題,有的版本添加了依然無法解決