antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
375 lines (316 loc) • 13.1 kB
Markdown
---
nav:
path: /components
group:
title: 导航
order: 6
toc: 'content'
---
# Tabs 标签页
内容组之间进行导航切换。
- 内容组之间进行导航切换。
- 当前内容需要分成同层级结构的组，进行内容切换展示，用在表单或者标准列表界面的顶部。
## 引入
在 `index.json` 中引入组件
```json
"usingComponents": {
#if ALIPAY
"ant-tabs": "antd-mini/es/Tabs/index"
#endif
#if WECHAT
"ant-tabs": "antd-mini/Tabs/index"
#endif
}
```
## 代码示例
### 基本使用
```xml
<ant-tabs items="{{items}}" />
```
```js
Page({
data: {
current: 0,
items: [
{
title: 'fruits',
subTitle: 'desc',
content: 'watermelon',
},
{
title: 'vegetables',
subTitle: 'desc',
badge: true,
content: 'tomato',
},
{
title: 'animals',
subTitle: 'desc',
content: 'monkey',
},
],
},
});
```
### 带有 content
```xml
<ant-tabs items="{{items}}">
<view class="content" slot-scope="item">
{{item.value.content}}
</view>
</ant-tabs>
```
### 胶囊
```xml
<ant-tabs type="capsule" items="{{items}}" defaultCurrent="{{1}}"></ant-tabs>
```
### 带副标题
```xml
<ant-tabs type="mixin" items="{{items}}"></ant-tabs>
```
### 带徽标
```xml
<ant-tabs items="{{items}}">
<view
slot="title"
slot-scope="item">
<view a:if="{{item.value.badge}}">
<ant-badge>{{item.value.title}}</ant-badge>
</view>
<view a:else>{{item.value.title}}</view>
</view>
</ant-tabs>
```
### 禁用状态
```xml
<ant-tabs items="{{items}}" />
```
```js
Page({
data: {
current: 0,
items: [
{
title: 'fruits',
subTitle: 'desc',
content: 'watermelon',
},
{
title: 'vegetables',
subTitle: 'desc',
disabled: true,
content: 'tomato',
},
{
title: 'animals',
subTitle: 'desc',
content: 'monkey',
},
],
},
});
```
### plus 按钮
```xml
<ant-tabs items="{{items}}">
<view slot="plus">
<ant-icon type="AddOutline" onTap="onPlus" />
</view>
</ant-tabs>
```
### 控制模式
```xml
<ant-tabs
items="{{items}}"
current="{{current}}"
#if ALIPAY
onChange="handleChange"
#endif
#if WECHAT
bindchange="handleChange"
#endif
/>
```
### 选择后居中滚动
```xml
<ant-tabs items="{{items}}" scrollMode="center" />
```
### Swiper
```xml
<ant-tabs
items="{{items}}"
current="{{current}}"
#if ALIPAY
onChange="onChange"
#endif
#if WECHAT
bindchange="onChange"
#endif
>
<swiper
current="{{current}}"
autoplay="{{false}}"
vertical="{{false}}"
circular="{{false}}"
#if ALIPAY
onChange="onSwipeChange"
#endif
#if WECHAT
bindchange="onSwipeChange"
#endif
>
<block a:for="{{items}}" a:for-index="index" a:for-item="item" a:key="{{index}}">
<swiper-item>
<view class="content">{{item.content}}</view>
</swiper-item>
</block>
</swiper>
</ant-tabs>
```
### 电梯模式
- 滚动会对应到 tab。
- 点击 tab 可滚动到对应 tab title。
- onChange 只会在 tab 切换触发，示例里自定义 title onTap 可滚动 current tab。
<code src='../../demo/pages/Tabs/TabsElevator/index'></code>
### 吸顶
- 滑动到最顶部会吸顶。
- 切换 tab content 会滚动到最顶部。
```xml
<ant-tabs items="{{items}}" current="{{current}}" onChange="onChange" className="sticky-tabs" />
```
```css
.sticky-tabs {
position: sticky;
top: -1px;
z-index: 999;
}
```
### 纵向模式
```xml
<ant-tabs
items="{{items}}"
current="{{current}}"
onChange="onChange"
className="tabs"
direction="vertical"
>
<scroll-view
scroll-top="{{scrollTop}}"
scroll-y="{{true}}"
onScroll="onScroll"
scroll-with-animation="{{true}}"
scroll-animation-duration="{{300}}"
class="content"
>
{{items[current].content}}
</scroll-view>
</ant-tabs>
```
### 纵向电梯模式
<code src='../../demo/pages/Tabs/TabsVerticalElevator/index'></code>
### Demo 代码
<code src='../../demo/pages/Tabs/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 | - |
| tabsBarWrapClassName | tab wrap 类名 | string | - |
| tabActiveClassName | tab active 类名 | string | - |
| title | 自定义 `Items` 标题；<br /> `slot-scope` 包括 `value`(对应 `Item`) `index`(对应 `Item` 的索引) | slot | - |
| type | 类型，`basic`(基础)，`capsule`(胶囊)，`mixin`(混合) | string | `basic` |
| #if ALIPAY onChange | 面板切换时候，触发回调 | (index: number, e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| #if WECHAT bindchange | 面板切换时候，触发回调 | (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>
```
### 主题定制
#### 样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 变量名 | 浅色模式默认值 | 深色模式默认值 | 备注 |
| ----------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------- |
| --tabs-basic-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #FFFFFF;">#333333</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #FFFFFF;">#c5cad1</div> | Tabs 基本颜色 |
| --tabs-weaken-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #FFFFFF;">#999999</div> | <div style="width: 150px; height: 30px; background-color: #616161; color: #FFFFFF;">#616161</div> | Tabs 弱化颜色 |
| --tabs-inverse-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | Tabs 反转色 |
| --tabs-active-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #FFFFFF;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #FFFFFF;">#3086ff</div> | Tabs 激活颜色 |
| --tabs-active-decorate-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #FFFFFF;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #FFFFFF;">#3086ff</div> | Tabs 激活装饰颜色 |
| --tabs-underline-border-color | <div style="width: 150px; height: 30px; background-color: #eeeeee; color: #333333;">#eeeeee</div> | <div style="width: 150px; height: 30px; background-color: #2b2b2b; color: #ffffff;">#2b2b2b</div> | Tabs 下划线边框颜色 |
| --tabs-plus-color | <div style="width: 150px; height: 30px; background-color: #000000; color: #FFFFFF;">#000000</div> | <div style="width: 150px; height: 30px; background-color: #000000; color: #FFFFFF;">#000000</div> | Tabs 加号颜色 |
| --tabs-capsule-title-bg | <div style="width: 150px; height: 30px; background-color: #f5f5f5; color: #333333;">#f5f5f5</div> | <div style="width: 150px; height: 30px; background-color: #121212; color: #ffffff;">#121212</div> | Tabs 胶囊标题背景色 |
| --tabs-subtitle-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | Tabs 副标题颜色 |
| --tabs-count-color | <div style="width: 150px; height: 30px; background-color: #cccccc; color: #333333;">#cccccc</div> | <div style="width: 150px; height: 30px; background-color: #474747; color: #fff;">#474747</div> | Tabs 计数颜色 |
## FAQ
### onChange 只有修改才能触发，想要在触发 current 标签的点击需要怎么做
可以使用 `slot` 来自定义。
```xml
<tabs
items="{{items}}"
#if ALIPAY
onChange="onChange"
#endif
#if WECHAT
bindchange="onChange"
#endif
>
<view
slot="title"
slot-scope="tab"
data-index="{{tab.index}}"
#if ALIPAY
onTap="onTap"
#endif
#if WECHAT
bindtap="onTap"
#endif
>
{{tab.value.title}}
</view>
</tabs>
```
```js
Page({
onChange(index) {
console.log(index);
},
onTap(e) {
const { index } = e.currentTarget.dataset;
},
});
```