Custom Tabs 组件使用文档

组件特性

✅ 高度自适应 - 自动继承父容器高度，内容区域自动撑满 ✅ 懒加载 - 支持 tab 内容懒加载，提升性能 ✅ 平滑动画 - 切换动画流畅自然 ✅ 灵活配置 - 支持自定义头部高度、颜色等 ✅ 响应式指示器 - 自动计算指示器位置和宽度

基础用法

<template>
  <view class="page">
    <custom-tabs v-model="activeTab" :tabs="tabs">
      <template #recent>
        <view class="tab-content"> 最近使用内容 </view>
      </template>

      <template #history>
        <view class="tab-content"> 会话记录内容 </view>
      </template>
    </custom-tabs>
  </view>
</template>

<script setup lang="uts">
  import CustomTabs from "@/components/custom-tabs/custom-tabs.uvue";

  const activeTab = ref(0);

  const tabs = [
    { label: "最近使用", name: "recent" },
    { label: "会话记录", name: "history" },
  ];
</script>

<style lang="scss" scoped>
  .page {
    height: 100vh;

    .tab-content {
      padding: 32rpx;
    }
  }
</style>

Props

参数	说明	类型	默认值
tabs	Tab 数据列表	`Array<{label: string, name: string}>`	`[]`
modelValue / v-model	当前激活的 tab 索引	`number`	`0`
headerHeight	Tab 头部高度	`string`	`'88rpx'`
animated	是否开启切换动画	`boolean`	`true`
lazyLoad	是否懒加载 tab 内容	`boolean`	`true`

Events

事件名	说明	回调参数
update:modelValue	当前激活 tab 改变时触发	`(index: number)`
change	切换 tab 时触发	`(index: number, tab: Tab)`

Slots

每个 tab 对应一个具名插槽，插槽名称为 tabs 数组中的 name 字段。

完整示例

<template>
  <view class="page-container">
    <custom-tabs
      v-model="currentTab"
      :tabs="tabList"
      :header-height="'100rpx'"
      :animated="true"
      :lazy-load="true"
      @change="handleTabChange"
    >
      <!-- 最近使用 -->
      <template #recent>
        <scroll-view class="scroll-content" scroll-y>
          <view class="content-wrapper">
            <text>最近使用的内容</text>
          </view>
        </scroll-view>
      </template>

      <!-- 会话记录 -->
      <template #history>
        <scroll-view class="scroll-content" scroll-y>
          <view class="content-wrapper">
            <text>会话记录内容</text>
          </view>
        </scroll-view>
      </template>

      <!-- 收藏 -->
      <template #favorites>
        <scroll-view class="scroll-content" scroll-y>
          <view class="content-wrapper">
            <text>收藏内容</text>
          </view>
        </scroll-view>
      </template>
    </custom-tabs>
  </view>
</template>

<script setup lang="uts">
  import CustomTabs from "@/components/custom-tabs/custom-tabs.uvue";

  const currentTab = ref(0);

  const tabList = [
    { label: "最近使用", name: "recent" },
    { label: "会话记录", name: "history" },
    { label: "收藏", name: "favorites" },
  ];

  const handleTabChange = (index: number, tab: any) => {
    console.log("切换到", tab.label, "索引:", index);
  };
</script>

<style lang="scss" scoped>
  .page-container {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .scroll-content {
      flex: 1;
      height: 100%;
    }

    .content-wrapper {
      padding: 32rpx;
    }
  }
</style>

高度自适应说明

组件使用了 Flexbox 布局来实现高度自适应：

父容器约束：组件根元素使用 h-full flex flex-col，确保继承父级高度
内容区域自动撑满：内容区域使用 flex-1，自动填充剩余空间
使用建议：确保父容器有明确的高度（如 height: 100vh 或固定高度）

自定义样式

如需自定义样式，可以通过覆盖 CSS 变量或者深度选择器：

// 自定义激活颜色
::v-deep .custom-tabs {
  .tab-item.active .tab-label {
    color: #ff6b6b;
  }

  .tab-indicator {
    background: linear-gradient(90deg, #ff6b6b 0%, #ff8787 100%);
  }
}

注意事项

确保传入的 tabs 数组中的 name 字段与插槽名称一致
父容器需要有明确的高度，否则组件无法正确撑满
懒加载模式下，首次进入的 tab 会立即加载，其他 tab 在首次切换时加载
如果内容需要滚动，请在插槽内使用 scroll-view 组件

4.9 KiB Raw Blame History