Как использовать Swiper slideTo () в Vue3.0?


Как использовать Swiper slideTo () в Vue3.0?

17.11.2020 12:49:21 Просмотров 4 Источник

Версия Vue:3.0.2

Подметалка версия:6.3.5

Я хотел бы использовать метод slideTo Swiper в Vue3. 0, но он, похоже, не работает.

Можете ли вы сказать мне, как им пользоваться? https://codesandbox.io/s/interesting-hooks-1jblc?file=/src/App.vue

У вопроса есть решение - Посмотреть?

Ответы - Как использовать Swiper slideTo () в Vue3.0? / How to use Swiper slideTo() in Vue3.0?

Является ответом!
Yom S.

17.11.2020 03:22:52

Вы, кажется, используете одну библиотеку, но ссылаетесь на другую для документации.

Вы импортируете библиотеку из 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>

Не путать с использованием ref другой библиотекой (vue-awesome-swiper).

Помочь в развитии проекта:
Закрыть X