vue-awesome-swiper 手记_this.$refs.zswipertourist.swiper.on-优快云博客

本文介绍在Vue中如何正确获取Swiper组件实例并调用其方法，如slideTo()，以及解决Swiper在隐藏状态下的滑动问题。通过在组件上添加ref属性和在计算属性中返回Swiper实例，可以实现对Swiper的直接控制。同时，文章还提供了在swiperOption中设置observer和observeParents选项来解决隐藏Swiper滑动不顺畅的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、获取到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

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