vue3中如何用程序切换swiper的tab页

在Vue3中，你可以通过数据驱动的方式控制Swiper的tab页。Swiper通常会提供一种API让你动态改变当前显示的幻灯片或者页面。以下是一个基本的例子：

首先，你需要在你的组件中安装Swiper库，并创建必要的数据状态来跟踪当前选中的tab页：

<template>
  <div ref="swiper">
    <swiper :options="swiperOptions" class="swiper-container">
      <swiper-slide v-for="(item, index) in slides" :key="index" :class="{ active: currentSlide === index }">
        <div>{{ item.content }}</div>
      </swiper-slide>
      <!-- 添加导航按钮 -->
      <div v-for="(nav, navIndex) in navigationButtons" :key="navIndex" @click="setActiveSlide(navIndex)">
        {{ nav }}
      </div>
    </swiper>
  </div>
</template>

然后在script部分：

import SwiperCore, { Navigation} from 'swiper';
import { ref } from 'vue';

const swiper = new SwiperCore.Swiper.extend({
  ...Navigation,
  // 其他Swiper配置...
});

export default {
  components: {
    Swiper,
  },
  setup() {
    const slides = ['Slide 1', 'Slide 2', 'Slide 3']; // 定义你的滑动内容
    const currentSlide = ref(0); // 当前选中的索引

    const setActiveSlide = (slideIndex) => {
      currentSlide.value = slideIndex;
      this.$refs.swiper.slideTo(slideIndex);
    };

    return {
      slides,
      currentSlide,
      swiperOptions: {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          spaceBetween: 30,
        },
      },
      setActiveSlide,
    };
  },
};

每次点击导航按钮时，`setActiveSlide`方法会被调用，更新`currentSlide`的状态，进而通过`slideTo`方法让Swiper切换到相应的页。