用于让用户在不同的视图中进行切换。
| 属性名 | 描述 | 类型 | 默认值 | 必选 |
| activeTab | 当前激活Tab索引 | Number | true | |
| tabs | tab数据，其中包括选项标题title，列表唯一锚点值，以及徽标类型badgeType，分为圆点dot和文本text，不设置badgeType则不显示徽标。徽标文本badgeText在badgeType为text时生效 |
Array<title, anchor> | true | |
| animated | 是否开启动画 | Boolean | false | |
| swipeable | 是否可滑动切换 | Boolean | true | |
| tabBarActiveBgColor | tabBar激活状态背景色 | String | false | |
| tabBarInactiveBgColor | tabBar非激活状态背景色 | String | false | |
| tabBarActiveTextColor | tabBar激活Tab文字颜色 | String | false | |
| tabBarInactiveTextColor | tabBar非激活Tab文字颜色 | String | false | |
| tabBarlineColor | tabBar侧划线颜色 | String | false | |
| onTabClick | tab 被点击的回调 | (index: Number) => void | false | |
| onChange | vtab-content变化时触发 | (index: Number) => void | false |
视图内容
| 属性名 | 描述 | 类型 | 默认值 | 必选 |
| anchor | 列表唯一锚点值 | String | true |
{
"defaultTitle": "应用AntUI组件库",
"usingComponents": {
"vtabs": "mini-antui/es/vtabs/index",
"vtab-content": "mini-antui/es/vtabs/vtab-content/index"
}
}
<view>
<vtabs
tabs="{{tabs}}"
onTabClick="handleChange"
onChange="onChange"
activeTab="{{activeTab}}"
>
<block a:for="{{tabs}}">
<vtab-content anchor="{{item.anchor}}">
<view style="border: 1px solid #eee; height: 800px; box-sizing: border-box">
<text>content of {{item.title}}</text>
</view>
</vtab-content>
</block>
</vtabs>
</view>
Page({
data: {
activeTab: 2,
tabs: [
{ title: '选项二', anchor: 'a', badgeType: 'dot' },
{ title: '选项', anchor: 'b', badgeType: 'text', badgeText: '新' },
{ title: '不超过五字', anchor: 'c' },
{ title: '选项四', anchor: 'd' },
{ title: '选项五', anchor: 'e' },
{ title: '选项六', anchor: 'f' },
],
},
handleChange(index) {
this.setData({
activeTab: index,
});
},
onChange(index) {
console.log('onChange', index);
this.setData({
activeTab: index,
});
},
});
