uniapp uv-ui选项卡

UniApp 的 UV-UI（Vue 界面库）是一个轻量级、高性能的 UI 组件库，它适用于快速构建跨平台应用，包括 Web、小程序和 H5。UV-UI 中的选项卡（Tabs）组件允许开发者轻松创建切换界面的功能，通常用于展示不同的内容区域，比如导航菜单中的各个页面。

在 UV-UI 中，你可以通过以下步骤来添加选项卡：

1. **导入组件**：首先，在 Vue 文件中导入 `uv-tabs` 和你需要的子项组件，如 `uv-tab-item`。

<template>
  <div>
    <u-v-tabs>
      <!-- 子项组件将会在这里 -->
    </u-v-tabs>
  </div>
</template>

<script>
import { uvTabs, uvTabItem } from '@/components/uv-ui';
export default {
  components: {
    uvTabs,
    uvTabItem,
  },
};
</script>

2. **配置选项卡**：在 `<u-v-tabs>` 元素内添加多个 `uv-tab-item`，每个代表一个标签页，可以设置 `active` 属性来指定默认激活的标签。

<u-v-tabs>
  <u-v-tab-item :title="tabTitle1" active>内容1</u-v-tab-item>
  <u-v-tab-item :title="tabTitle2">内容2</u-v-tab-item>
  <!-- 添加更多 tab-item 根据需要 -->
</u-v-tabs>

3. **绑定数据和事件**：如果你需要动态控制标签页，可以在组件内部维护状态，并监听 `on-change` 事件来处理切换。

data() {
  return {
    tabTitle1: '标题1',
    tabTitle2: '标题2',
    // ...
  };
},
methods: {
  onChange(index) {
    console.log('当前选中的标签索引:', index);
  },
}