uniapp swiper选项卡

UniApp Swiper 是一款基于 Vue.js 的轮播组件，它在 UniApp 开发框架中用于展示图片、内容块或其他视图切换效果。Swiper 的选项卡功能允许你创建一个包含多个面板（tab）的导航栏，用户可以通过点击不同的标签页切换显示的内容。

在使用 UniApp Swiper 的选项卡模式时，你可以设置以下几个关键配置：

1. **tabs** 或 **tabbar**: 这是一个数组，包含每个标签项的信息，包括 label（标签文字）、page（对应页面的索引或组件引用）等。

   {
     tabs: [
       {label: 'Tab 1', page: 0},
       {label: 'Tab 2', page: 1},
       {label: 'Tab 3', page: 2}
     ]
   }

2. **mode**: 设置为 "horizontal" 或 "vertical" 来控制滑动方向，默认是 "horizontal"。

3. **activeIndex**: 初始选中的标签索引。

4. **pagination**: 是否显示分页指示器，默认启用。

5. **autoplay**: 自动滚动功能，可以设置自动切换的速度。

6. **events**: 可自定义滑动切换时触发的各种事件，如 change、click等。

使用时，需要先安装 Swiper 组件并导入到项目中，然后在 Vue 实例中注册并配置该组件。示例代码如下：

<template>
  <uni-swipe v-bind="swiperOptions" @change="onSlideChange">
    <view v-for="(item, index) in pages" :key="index">{{ item.content }}</view>
  </uni-swipe>
</template>

<script setup>
import { ref } from 'vue'
import { Swiper, SwiperOption } from '@dcloudio/uni-app'

const swiperOptions = ref<SwiperOption>({
  // ... 初始化配置
  tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
  // 其他选项...
})

const pages = [/* 页面数据 */]

function onSlideChange(index) {
  console.log('当前标签页:', index)
}
</script>