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

Question

Vue version:3.0.2

刷卡器version:6.3.5

想在Vue3.0中使用Swiper的slideTo方法，但是好像不行

能告诉我怎么用吗？ https://codesandbox.io/s/interesting-hooks-1jblc?file=/src/App.vue

Answer 1

您似乎在使用一个库，但参考了另一个库来获取文档。

您正在从swiper/vue导入库，因此它必须是官方库；在这种情况下，访问 Swiper 实例会略有不同：您需要存储 Swiper 实例。（参见 Controller mode）。所以在你的情况下：

<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>

不要与其他库 (vue-awesome-swiper) 混淆 the use of ref。

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

How to use Swiper slideTo() in Vue3.0?

vue.js

swiper

vuejs3

swiperjs