---
nav:
  path: /components
group:
  title: 导航
  order: 6
toc: 'content'
---

# Tabs 标签页

<code src="../../docs/components/compatibility.tsx" inline="true"></code>

内容组之间进行导航切换。
## 何时使用
- 内容组之间进行导航切换。
- 当前内容需要分成同层级结构的组，进行内容切换展示，用在表单或者标准列表界面的顶部。

## 代码示例
### 基本使用
<code src='pages/Tabs/index'></code>

### 受控
<code src='pages/TabsControl/index'></code>

### 滑动
<code src='pages/TabsScroll/index'></code>

### Swiper
<code src='pages/TabsSwiper/index'></code>

### 电梯模式
- 滚动会对应到 tab。
- 点击 tab 可滚动到对应 tab title。
- onChange 只会在 tab 切换触发，示例里自定义 title onTap 可滚动 current tab。

<code src='pages/TabsElevator/index'></code>

### 吸顶
- 滑动到最顶部会吸顶。
- 切换 tab content 会滚动到最顶部。

<code src='pages/TabsSticky/index'></code>

### 纵向模式
<code src='pages/TabsVertical/index'></code>

### 纵向电梯模式
<code src='pages/TabsVerticalElevator/index'></code>

## API
| 属性 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| className | 类名 | string | - |
| current | 选中索引 | number | - |
| defaultCurrent | 选中索引初始值 | number | 0 |
| direction | tabs 方向，`horizontal`(水平) `vertical`(垂直) | string | horizontal |
| items | 选项，数量必须大于 0 | `Item[]` | - |
| plus | 右上角操作按钮插槽；<br /> `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` 标题；<br /> `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
<tabs items="{{items}}">
  <view slot="title" slot-scope="tab">
    {{ tab.index }}：{{ tab.value.title }}，{{ tab.value.content }}
  </view>
</tabs>
```

## FAQ
### onChange 只有修改才能触发，想要在触发 current 标签的点击需要怎么做
可以使用 `slot` 来自定义。
```html
<tabs items="{{items}}" onChange="onChange">
  <view slot="title" slot-scope="tab" data-index="{{tab.index}}" onTap="onTap">
    {{ tab.value.title }}
  </view>
</tabs>
```

```js
Page({
  onChange(index) {
    console.log(index)
  },
  onTap(e) {
    const { index } = e.currentTarget.dataset
  }
})
```