vue-awesome-swiper 手記
阿新 • • 發佈:2019-01-08
一、獲取到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
這兩個選項貌似存在版本的問題,有的版本添加了依然無法解決