179 lines
4.9 KiB
Markdown
179 lines
4.9 KiB
Markdown
# Custom Tabs 组件使用文档
|
|
|
|
## 组件特性
|
|
|
|
✅ **高度自适应** - 自动继承父容器高度，内容区域自动撑满
|
|
✅ **懒加载** - 支持 tab 内容懒加载，提升性能
|
|
✅ **平滑动画** - 切换动画流畅自然
|
|
✅ **灵活配置** - 支持自定义头部高度、颜色等
|
|
✅ **响应式指示器** - 自动计算指示器位置和宽度
|
|
|
|
## 基础用法
|
|
|
|
```vue
|
|
<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` 字段。
|
|
|
|
## 完整示例
|
|
|
|
```vue
|
|
<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** 布局来实现高度自适应：
|
|
|
|
1. **父容器约束**：组件根元素使用 `h-full flex flex-col`，确保继承父级高度
|
|
2. **内容区域自动撑满**：内容区域使用 `flex-1`，自动填充剩余空间
|
|
3. **使用建议**：确保父容器有明确的高度（如 `height: 100vh` 或固定高度）
|
|
|
|
## 自定义样式
|
|
|
|
如需自定义样式，可以通过覆盖 CSS 变量或者深度选择器：
|
|
|
|
```scss
|
|
// 自定义激活颜色
|
|
::v-deep .custom-tabs {
|
|
.tab-item.active .tab-label {
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.tab-indicator {
|
|
background: linear-gradient(90deg, #ff6b6b 0%, #ff8787 100%);
|
|
}
|
|
}
|
|
```
|
|
|
|
## 注意事项
|
|
|
|
1. 确保传入的 `tabs` 数组中的 `name` 字段与插槽名称一致
|
|
2. 父容器需要有明确的高度，否则组件无法正确撑满
|
|
3. 懒加载模式下，首次进入的 tab 会立即加载，其他 tab 在首次切换时加载
|
|
4. 如果内容需要滚动，请在插槽内使用 `scroll-view` 组件
|