TabBar 标签栏

标签栏用于在不同功能模块之间进行切换，预设 9 种颜色 light, stable, positive, calm, assertive, balanced, energized, royal, dark 可选用。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "TabBar",
  3.     "usingComponents": {
  4.         "wux-icon": "../../dist/icon/index",
  5.         "wux-badge": "../../dist/badge/index",
  6.         "wux-tabbar": "../../dist/tabbar/index",
  7.         "wux-tabbar-item": "../../dist/tabbar-item/index"
  8.     }
  9. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">TabBar</view>
  4.         <view class="page__desc">标签栏</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <view class="sub-title">Default</view>
  8.         <wux-tabbar defaultCurrent="tab2">
  9.             <wux-tabbar-item key="tab1" title="Tab 1">
  10.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  11.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  12.             </wux-tabbar-item>
  13.             <wux-tabbar-item key="tab2" title="Tab 2">
  14.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  15.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  16.             </wux-tabbar-item>
  17.             <wux-tabbar-item key="tab3" title="Tab 3">
  18.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  19.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  20.             </wux-tabbar-item>
  21.         </wux-tabbar>
  22.         <view class="sub-title">Theme = positive</view>
  23.         <wux-tabbar defaultCurrent="1" theme="positive">
  24.             <wux-tabbar-item title="Tab 1">
  25.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  26.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  27.             </wux-tabbar-item>
  28.             <wux-tabbar-item title="Tab 2">
  29.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  30.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  31.             </wux-tabbar-item>
  32.             <wux-tabbar-item title="Tab 3">
  33.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  34.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  35.             </wux-tabbar-item>
  36.         </wux-tabbar>
  37.         <view class="sub-title">Disabled</view>
  38.         <wux-tabbar defaultCurrent="1">
  39.             <wux-tabbar-item title="Tab 1">
  40.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  41.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  42.             </wux-tabbar-item>
  43.             <wux-tabbar-item title="Tab 2" disabled>
  44.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  45.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  46.             </wux-tabbar-item>
  47.             <wux-tabbar-item title="Tab 3">
  48.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  49.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  50.             </wux-tabbar-item>
  51.         </wux-tabbar>
  52.         <view class="sub-title">Controlled</view>
  53.         <wux-tabbar controlled current="{{ current }}" bindchange="onChange">
  54.             <wux-tabbar-item title="Tab 1">
  55.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  56.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  57.             </wux-tabbar-item>
  58.             <wux-tabbar-item title="Tab 2">
  59.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  60.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  61.             </wux-tabbar-item>
  62.             <wux-tabbar-item title="Tab 3">
  63.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  64.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  65.             </wux-tabbar-item>
  66.         </wux-tabbar>
  67.         <view class="sub-title">With Badge</view>
  68.         <wux-tabbar defaultCurrent="1" position="bottom" safeArea>
  69.             <wux-tabbar-item title="Tab 1">
  70.                 <wux-badge count="1" slot="icon-on">
  71.                     <wux-icon wux-class="icon" type="ios-home" size="22" />
  72.                 </wux-badge>
  73.                 <wux-badge count="1" slot="icon-off">
  74.                     <wux-icon wux-class="icon" type="ios-home" size="22" />
  75.                 </wux-badge>
  76.             </wux-tabbar-item>
  77.             <wux-tabbar-item title="Tab 2">
  78.                 <wux-badge dot slot="icon-on">
  79.                     <wux-icon wux-class="icon" type="ios-home" size="22" />
  80.                 </wux-badge>
  81.                 <wux-badge dot slot="icon-off">
  82.                     <wux-icon wux-class="icon" type="ios-home" size="22" />
  83.                 </wux-badge>
  84.             </wux-tabbar-item>
  85.             <wux-tabbar-item title="Tab 3">
  86.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
  87.                 <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  88.             </wux-tabbar-item>
  89.         </wux-tabbar>
  90.     </view>
  91. </view>
  1. Page({
  2.     data: {
  3.         current: '1',
  4.     },
  5.     onChange(e) {
  6.         console.log('onChange', e)
  7.         this.setData({
  8.             current: e.detail.key,
  9.         })
  10.     },
  11. })

视频演示

TabBar

API

TabBar props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-tabbar
defaultCurrent string 默认激活 tab 面板的 key，当 controlled 为 false 时才生效 -
current string 用于手动激活 tab 面板的 key，当 controlled 为 true 时才生效 -
controlled boolean 是否受控 说明文档 false
theme string 主题色，可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark balanced
position string 标签栏位置，可选值为 bottom、top -
safeArea boolean 是否适配 iPhoneX，当 position 为 bottom/top 时才生效 false
bind:change function 切换面板的回调函数 -

TabBar externalClasses

名称 描述
wux-class 根节点样式类

TabBarItem props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-tabbar-item
key string 对应 key -
title string 选项卡标题 -
disabled boolean 是否禁用 false
bind:click function 点击事件 -

TabBarItem slot

名称 描述
- 自定义标题
icon-on 自定义默认展示图标
icon-off 自定义选中后的展示图标

TabBarItem externalClasses

名称 描述
wux-class 根节点样式类