版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33737087/article/details/86064675
一、获取到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
这两个选项貌似存在版本的问题,有的版本添加了依然无法解决