vue3中使用swiper轮播图的slideTo方法跳转到指定页面
介绍
SlideTo： 使用swiper时， 可通过slideTo 方法跳转到指定的索引页；一般常用的参数有两个
- index----索引
- speed—速度
分析
在 vue3 中， 实现 swiper 控制器的响应式控制，大概分为以下几步：
- 创建一个响应式引用，用于存储Swiper实例
- 将创建的实例传递给
Swiper的setControlledSwiper方法。
代码
这里直接使用上篇文章的代码，具体代码解释可参考上几篇文章；这里只针对轮播图的指定跳转等做解释。
<template><div class="index"><swiper:modules="modules":loop="true":slides-per-view="1":space-between="50":autoplay="true":navigation="navigation":pagination="{ clickable: true }":scrollbar="{ draggable: false }"class="swiperBox"@slideChange="onSlideChange"@swiper="setControlledSwiper":controller="{controlledSwiper }"><swiper-slidev-for="(item,index) in state.swiperList":key="index"><div class="swiper-content"><img :src="item.img" alt="" class="swiper-img"></div></swiper-slide><div class="swiper-button-prev" @click.stop="prevEl()" /><!--左箭头。如果放置在swiper外面，需要自定义样式。--><div class="swiper-button-next" @click.stop="nextEl()" /><!--右箭头。如果放置在swiper外面，需要自定义样式。--><!-- 如果需要滚动条 --><!-- <div class="swiper-scrollbar"></div> --></swiper></div>
</template>
<script setup>import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue';import { Swiper, SwiperSlide } from 'swiper/vue'import 'swiper/css/navigation' // 轮播图两边的左右箭头import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper/modules'const navigation = ref({nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",});// 在modules加入要使用的模块const modules = [Autoplay, Pagination, Navigation, Scrollbar]const state = reactive({swiperList:[{id:0,img:'/img1.png'},{id:1,img:'/img2.png'}]})// 核心代码 // 创建响应式实例const controlledSwiper = ref(null);// 将实例传递给方法；const setControlledSwiper = (swiper) => {controlledSwiper.value = swiper;console.log(controlledSwiper.value);};// 例如： 点击上箭头的时候默认跳转到第一页；// 实例存在的时候，调用slideTo方法，传递参数； 默认跳转到第一页，所以索引传递0，const prevEl = (e) => {controlledSwiper.value?.slideTo(0,500);}// 更改当前活动swiperconst onSlideChange = (swiper) => {// swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndexconsole.log(swiper.activeIndex)}</script>