The tabbar @wines
@wines/tabbar标签栏用于在不同功能模块之间进行切换,预设 9 种颜色 light, stable, positive, calm, assertive, balanced, energized, royal, dark 可选用。
``json`
{
"navigationBarTitleText": "TabBar",
"usingComponents": {
"wux-icon": "@wines/icon",
"wux-badge": "@wines/badge",
"wux-tabbar": "@wines/tabbar",
"wux-tabbar-item": "@wines/tabbar/item"
}
}
`xml
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
position="bottom"
safeArea
backgroundColor="#000"
>
type="ios-home"
size="22"
slot="icon-on"
/>
type="ios-home"
size="22"
slot="icon-off"
/>
`
`ts
import './index.less';
Page({
data: {
current: '1',
},
onChange(e) {
console.log('onChange', e);
this.setData({
current: e.detail.key,
});
},
});
`
| 参数 | 类型 | 描述 | 默认值 |
| --------------- | ---------- | ------------------------------------------------------------------------------------------- | ---------- |
| prefixCls | string | 自定义类名前缀 | wux-tabbar |string
| defaultCurrent | | 默认激活 tab 面板的 key,当 controlled 为 false 时才生效 | - |string
| current | | 用于手动激活 tab 面板的 key,当 controlled 为 true 时才生效 | - |boolean
| controlled | | 是否受控 说明文档 | false |string
| theme | | 主题色,可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark | balanced |string
| backgroundColor | | 背景色 | #fff |string
| position | | 标签栏位置,可选值为 bottom、top | - |boolean
| safeArea | | 是否适配 iPhoneX,当 position 为 bottom/top 时才生效 | false |function
| bind:change | | 切换面板的回调函数 | - |
| 名称 | 描述 |
| --------- | ------------ |
| wux-class | 根节点样式类 |
| 参数 | 类型 | 描述 | 默认值 |
| ---------- | ---------- | -------------- | --------------- |
| prefixCls | string | 自定义类名前缀 | wux-tabbar-item |string
| key | | 对应 key | - |string
| title | | 选项卡标题 | - |boolean
| disabled | | 是否禁用 | false |function` | 点击事件 | - |
| bind:click |
| 名称 | 描述 |
| -------- | ---------------------- |
| - | 自定义标题 |
| icon-on | 自定义默认展示图标 |
| icon-off | 自定义选中后的展示图标 |
| 名称 | 描述 |
| --------- | ------------ |
| wux-class | 根节点样式类 |