1/fore-end/miniprogram_npm/antd-mini/Tabs/index.md

---

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) => void	-

Item

属性	说明	类型	默认值
title	标题	string	-

在 Item 里除了可以有 title，还可以加上自定义的属性，比如 content, badge 等，这些属性可使用 slot-scope 访问：

Page({
  data: {
    items: [
      {
        title: 'tab 1',
        content: 'tab 1 content',
      },
      {
        title: 'tab 2',
        content: 'tab 2 content',
      },
      {
        title: 'tab 3',
        content: 'tab 3 content'
      }
    ]
  }
})

<tabs items="{{items}}">
  <view slot="title" slot-scope="tab">
    {{ tab.index }}：{{ tab.value.title }}，{{ tab.value.content }}
  </view>
</tabs>

FAQ

onChange 只有修改才能触发，想要在触发 current 标签的点击需要怎么做

可以使用 slot 来自定义。

<tabs items="{{items}}" onChange="onChange">
  <view slot="title" slot-scope="tab" data-index="{{tab.index}}" onTap="onTap">
    {{ tab.value.title }}
  </view>
</tabs>

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