Vue版本:3.0.2雨刷版本:6.3.5我想在Vue3.0中使用Swiper的slideTo方法,但它似乎不起作用。你能告诉我怎么用吗?
jhdbpxl91#
您似乎正在使用一个库,但引用了另一个库的文档。
您正在从swiper/vue导入库,因此它必须是正式的库;在这种情况下,访问Swiper示例的方式略有不同:您需要存储Swiper示例。(参见控制器模式)。因此在您的情况下:
swiper/vue
<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)相混淆。
ref
vue-awesome-swiper
zbwhf8kr2#
如果您使用的是<script setup>,则可以这样做:
<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>
2条答案
按热度按时间jhdbpxl91#
您似乎正在使用一个库,但引用了另一个库的文档。
您正在从
swiper/vue
导入库,因此它必须是正式的库;在这种情况下,访问Swiper示例的方式略有不同:您需要存储Swiper示例。(参见控制器模式)。因此在您的情况下:不要与其他库使用
ref
(vue-awesome-swiper
)相混淆。zbwhf8kr2#
如果您使用的是
<script setup>
,则可以这样做: