vue3中使用swiper轮播图的slideTo方法跳转到指定页面

介绍

SlideTo： 使用swiper时， 可通过slideTo 方法跳转到指定的索引页；一般常用的参数有两个

1. index----索引
2. speed—速度

分析

在 vue3 中， 实现 swiper 控制器的响应式控制，大概分为以下几步：

1. 创建一个响应式引用，用于存储Swiper实例
2. 将创建的实例传递给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-slide
            v-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);
 }
  // 更改当前活动swiper
  const onSlideChange = (swiper) => {
  // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
    console.log(swiper.activeIndex)
  }

</script>