主题
Tabs 标签页
横向展示可切换的标签，支持滚动、角标和底部滑块。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 标签切换 -->
<fui-tabs :tabs="['全部', '进行中', '已完成']" @change="handleTabChange" />handleTabChange 根据返回的 index 切换对应页面内容。
属性
除标明其他单位外，尺寸和偏移单位为 rpx。
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| tabs | Array | 标签数据 | [] |
| nameKey | String | 标签名称字段 | name |
| badgeKey | String | 角标字段 | badge |
| disabledKey | String | 禁用状态字段 | disabled |
| current | Number | 当前索引 | 0 |
| scroll | Boolean | 超出一屏时是否滚动 | false |
| height | Number / String | 标签栏高度 | 96 |
| background | String | 背景色 | #fff |
| size | Number / String | 默认字号 | 28 |
| color | String | 默认文字颜色 | #7F7F7F |
| fontWeight | Number / String | 默认字重 | normal |
| selectedSize | Number / String | 选中字号，仅 nvue 生效 | 32 |
| selectedColor | String | 选中文字颜色 | #465CFF |
| selectedFontWeight | Number / String | 选中字重 | 500 |
| scale | Number / String | 选中文字缩放比例，nvue 不支持 | 1.2 |
| badgeColor | String | 角标文字颜色 | #fff |
| badgeBackground | String | 角标背景色 | #FF2B2B |
| isDot | Boolean | 角标是否显示为圆点 | false |
| isSlider | Boolean | 是否显示底部滑块 | true |
| sliderHeight | Number / String | 滑块高度 | 5 |
| sliderBackground | String | 滑块颜色 | #465CFF |
| sliderRadius | Number / String | 滑块圆角，-1 使用滑块高度 | -1 |
| padding | Number / String | 滑块左右内边距 | 0 |
| bottom | Number / String | 滑块底部偏移 | 0 |
| short | Boolean | 是否使用 45rpx 的短滑块 | true |
| center | Boolean | 滑块是否居中 | false |
| isFixed | Boolean | 是否固定在顶部 | false |
| isSticky | Boolean | 是否吸顶，开启时 isFixed 不生效 | false |
| top | Number / String | 固定或吸顶时的顶部距离，单位 px | 0 |
| alignLeft | Boolean | 标签不足一屏时是否左对齐 | false |
| direction | Boolean（官网表格） | 图标和文字排列方向：row、column | row |
| itemPadding | Number / String | 标签项左右内边距 | 32 |
| zIndex | Number / String | 固定或吸顶时的层级，nvue 不支持 | 996 |
官网将 direction 类型列为 Boolean，但可选值为字符串；本地源码也使用 String。H5 的 top 默认值为 44px；nvue 滚动超出一屏时需同时启用 scroll 和 alignLeft。
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| change | 切换标签 | 包含 index 和当前标签字段的对象 |
非 nvue 平台的默认文字、主色和角标颜色由主题变量控制。
插槽
| 插槽 | 说明 |
|---|---|
| — | 官网未列出该组件的插槽 |