uniapp vue3 标签页

对于UniApp和Vue3开发的标签页，你可以通过使用uni-tab组件来实现。以下是一个示例代码：

<template>
  <view>
    <uni-tab-bar :current="currentTab" @click="changeTab">
      <uni-tab-bar-item title="Tab 1" icon="uni-icons-list"></uni-tab-bar-item>
      <uni-tab-bar-item title="Tab 2" icon="uni-icons-home"></uni-tab-bar-item>
      <uni-tab-bar-item title="Tab 3" icon="uni-icons-person"></uni-tab-bar-item>
    </uni-tab-bar>
    <uni-tabs v-model="currentTab">
      <uni-tab>
        <view>
          <text>This is Tab 1</text>
        </view>
      </uni-tab>
      <uni-tab>
        <view>
          <text>This is Tab 2</text>
        </view>
      </uni-tab>
      <uni-tab>
        <view>
          <text>This is Tab 3</text>
        </view>
      </uni-tab>
    </uni-tabs>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0
    };
  },
  methods: {
    changeTab(index) {
      this.currentTab = index;
    }
  }
};
</script>

<style>
/* 样式调整根据需要自行修改 */
</style>

在上面的代码中，我们首先使用`uni-tab-bar`组件创建了一个底部导航栏，其中包含三个选项卡。然后，我们使用`uni-tabs`组件创建了一个标签页容器，并在其中定义了三个标签页。

通过设置`v-model`指令来控制当前选中的标签页，我们可以在`changeTab`方法中更新`currentTab`的值，从而实现切换标签页的功能。

请注意，上述代码只是一个简单示例，您可以根据自己的需求进行样式和功能调整。