如何在Vue3.0中使用Swiper slideTo()?

zdwk9cvp  于 2023-02-19  发布在  Vue.js
关注(0)|答案(2)|浏览(616)

Vue版本:3.0.2
雨刷版本:6.3.5
我想在Vue3.0中使用Swiper的slideTo方法,但它似乎不起作用。
你能告诉我怎么用吗?

jhdbpxl9

jhdbpxl91#

您似乎正在使用一个库,但引用了另一个库的文档。

您正在从swiper/vue导入库,因此它必须是正式的库;在这种情况下,访问Swiper示例的方式略有不同:您需要存储Swiper示例。(参见控制器模式)。因此在您的情况下:

<template>
  <swiper
    style="border: 1px solid red; width: 400px"
    :slides-per-view="1"
    @swiper="onSwiper"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
  </swiper>

  <button @click="handleSlideTo">slide to 4</button>
</template>

<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.css";

export default {
  name: "App",
  
  components: {
    Swiper,
    SwiperSlide,
  },

  data() {
    return {
      swiper: null,
    };
  },

  methods: {
    onSwiper(swiper) {
      this.swiper = swiper;
    },

    handleSlideTo() {
      this.swiper.slideTo(3);
    },
  },
};
</script>

不要与其他库使用refvue-awesome-swiper)相混淆。

zbwhf8kr

zbwhf8kr2#

如果您使用的是<script setup>,则可以这样做:

<script setup>
  import { ref } from 'vue'
  import { Swiper, SwiperSlide } from 'swiper/vue'

  import 'swiper/css'

  const swiperInstance = ref()

  function onSwiper(swiper) {
    swiperInstance.value = swiper
  }

  function goToSlide(position) {
    swiperInstance?.slideTo(position)
  }
</script>

<template>
  <button @click="goToSlide(3)">
    Go to slide 3
  </button>

  <Swiper @swiper="onSwiper">
    <SwiperSlide v-for="i in 4">
      Slide {{ i }}
    </SwiperSlide>
  </Swiper>
</template>

相关问题