安装
tnpm install --save @ali/mas-tabbar组件介绍
行业小程序选项卡组件
参数说明
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| tabs | 是 | 数组 | 选项卡数组 | [] | [] |
| onClick | 否 | 函数 | 点击每个选项卡的回调函数 | 空函数 | - |
| activeKey | 否 | string | 当前选中的选项卡 | 空 | '' |
其中tabs里的每一项需遵循如下格式:
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| icon | 是 | 字符串 | 选项卡未选中时的图标 | - | - |
| activeIcon | 是 | 字符串 | 选项卡选中状态的图标 | - | - |
| label | 是 | 字符串 | 选项卡文案 | '' | - |
| key | 是 | 字符串 | 选项卡的key | '' | - |
| badge | 否 | 数字 | 选项卡的右上角红色徽标内容 | '' | - |
| filterIconDirection | 否 | 字符串 | 选项卡文案后面的过滤箭头方向，“up”或“down” | '' | up,down |
在小程序中使用
{
"usingComponents": {
"mas-tabbar": "@alipay/mas-tabbar/es/index"
}
}在 page.axml 中引用组件
<!-- 页面使用方式 -->
<mas-tabbar
...
props=""
...
/>Badges
