vue3的option式编程模式里如何用代码主动切换swiper的tab页

在Vue3的Option式编程模式中，我们可以利用组件的`data`、`methods`以及自定义事件来主动切换Swiper的Tab页。假设你有一个包含多个Swiper Tab的Swiper实例，你可以这样做：

<template>
  <div id="swiper-container">
    <swiper :options="swiperOptions" @change="onSlideChange">
      <!-- 定义每个Tab页 -->
      <swiper-slide v-for="(item, index) in tabs" :key="index">
        {{ item.content }}
      </swiper-slide>
      
      <!-- 添加导航按钮 -->
      <div class="swiper-button-next" @click="prevSlide"></div>
      <div class="swiper-button-prev" @click="nextSlide"></div>
    </swiper>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Swiper from 'swiper'

const swiper = new Swiper('.swiper-container', {
  ... // 初始化Swiper配置
})

// 定义tabs数据
const tabs = ref([{ content: 'Tab 1' }, { content: 'Tab 2' }, { content: 'Tab 3' }])

// 变更Swiper当前索引的函数
function changeTab(index) {
  swiper.slideTo(index)
}

// 当前滑到新的slide时触发的回调
function onSlideChange() {
  const currentIndex = swiper.realIndex
  tabs.value.forEach((tab, i) => {
    tab.active = (i === currentIndex)
  })
}

// 上一页的点击方法
function prevSlide() {
  if (swiper.previousIndex !== undefined && swiper.previousIndex !== -1) {
    changeTab(swiper.previousIndex)
  }
}

// 下一页的点击方法
function nextSlide() {
  if (swiper.currentIndex !== swiper.slides.length - 1) {
    changeTab(swiper.currentIndex + 1)
  }
}
</script>

<style scoped>
.swiper-button-next,
.swiper-button-prev {
  /* 样式省略 */
}
</style>

在这个例子中，`tabs`变量存储了各个Tab的内容，`changeTab`函数用于实际切换Tab，`prevSlide`和`nextSlide`分别处理左右箭头的点击事件，当Swiper改变当前slide时，会更新`tabs`中对应Tab的active状态。