--- nav: path: /components group: title: 导航 order: 6 toc: 'content' --- # Tabs 标签页 内容组之间进行导航切换。 ## 何时使用 - 内容组之间进行导航切换。 - 当前内容需要分成同层级结构的组,进行内容切换展示,用在表单或者标准列表界面的顶部。 ## 代码示例 ### 基本使用 ### 受控 ### 滑动 ### Swiper ### 电梯模式 - 滚动会对应到 tab。 - 点击 tab 可滚动到对应 tab title。 - onChange 只会在 tab 切换触发,示例里自定义 title onTap 可滚动 current tab。 ### 吸顶 - 滑动到最顶部会吸顶。 - 切换 tab content 会滚动到最顶部。 ### 纵向模式 ### 纵向电梯模式 ## API | 属性 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | className | 类名 | string | - | | current | 选中索引 | number | - | | defaultCurrent | 选中索引初始值 | number | 0 | | direction | tabs 方向,`horizontal`(水平) `vertical`(垂直) | string | horizontal | | items | 选项,数量必须大于 0 | `Item[]` | - | | plus | 右上角操作按钮插槽;
`slot-scope` 包括 `value`(对应 `Item`) `index`(对应 `Item` 的索引) | slot | - | | scrollMode | 滚动方式,可选 'edge', 'center' | string | edge | | style | 样式 | string | - | | tabsBarClassName | tabs bar 类名 | string | - | | tabClassName | tab 类名 | string | - | | tabActiveClassName | tab active 类名 | string | - | | title | 自定义 `Items` 标题;
`slot-scope` 包括 `value`(对应 `Item`) `index`(对应 `Item` 的索引) | slot | - | | type | 类型,`basic`(基础),`capsule`(胶囊),`mixin`(混合) | string | `basic` | | onChange | 面板切换时候,触发回调 | (index: number, e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | ### Item | 属性 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | title | 标题 | string | - | 在 Item 里除了可以有 `title`,还可以加上自定义的属性,比如 `content`, `badge` 等,这些属性可使用 `slot-scope` 访问: ```js Page({ data: { items: [ { title: 'tab 1', content: 'tab 1 content', }, { title: 'tab 2', content: 'tab 2 content', }, { title: 'tab 3', content: 'tab 3 content' } ] } }) ``` ```html {{ tab.index }}:{{ tab.value.title }},{{ tab.value.content }} ``` ## FAQ ### onChange 只有修改才能触发,想要在触发 current 标签的点击需要怎么做 可以使用 `slot` 来自定义。 ```html {{ tab.value.title }} ``` ```js Page({ onChange(index) { console.log(index) }, onTap(e) { const { index } = e.currentTarget.dataset } }) ```