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

这两个选项貌似存在版本的问题，有的版本添加了依然无法解决