用于让用户在不同的视图中进行切换。
| 属性名 | 描述 | 类型 | 默认值 | 必选 |
| className | 自定义class | String | false | |
| activeCls | 自定义激活tabbar的class | String | ||
| tabs | tab数据，其中包括选项标题title，徽标类型badgeType分为圆点dot和文本text，不设置badgeType则不显示徽标。徽标文本badgeText在badgeType为text时生效 |
Array<title, badgeType, badgeText> | true | |
| activeTab | 当前激活Tab索引 | Number | true | |
| showPlus | 是否显示‘+’icon | Boolean | false | false |
| onPlusClick | ‘+’icon被点击时的回调 | () => {} | false | |
| onTabClick | tab 被点击的回调 | (index: Number) => void | false | |
| onChange | tab变化时触发 | (index: Number) => void | false | |
| swipeable | 是否可以滑动内容切换 | Boolean | true | false |
| duration | 当swipeable为true时滑动动画时长，单位ms | Number | 500(ms) | false |
| tabBarBackgroundColor | tabBar背景色 | String | false | |
| tabBarActiveTextColor | tabBar激活Tab文字颜色 | String | false | |
| tabBarInactiveTextColor | tabBar非激活Tab文字颜色 | String | false | |
| tabBarUnderlineColor | tabBar下划线颜色 | String | false | |
| tabBarCls | tabBar自定义样式class | String | false |
视图内容
| 属性名 | 描述 | 类型 | 默认值 | 必选 |
| index | 列表项的唯一索引 | String |
{
"defaultTitle": "应用AntUI组件库",
"usingComponents": {
"tabs": "mini-antui/es/tabs/index",
"tab-content": "mini-antui/es/tabs/tab-content/index"
}
}
<view>
<tabs
tabs="{{tabs}}"
showPlus="{{true}}"
onTabClick="handleTabClick"
onChange="handleTabChange"
onPlusClick="handlePlusClick"
activeTab="{{activeTab}}"
>
<block a:for="{{tabs}}">
<tab-content key="{{index}}">
<view class="tab-content">content of {{item.title}}</view>
</tab-content>
</block>
</tabs>
</view>
Page({
data: {
tabs: [
{
title: '选项',
badgeType: 'text',
badgeText: '6',
},
{
title: '选项二',
badgeType: 'dot',
},
{ title: '3 Tab' },
{ title: '4 Tab' },
{ title: '5 Tab' },
],
activeTab: 2,
},
handleTabClick({ index }) {
this.setData({
activeTab: index,
});
},
handleTabChange({ index }) {
this.setData({
activeTab: index,
});
},
handlePlusClick() {
my.alert({
content: 'plus clicked',
});
},
});
.tab-content {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
