TabBar 标签栏 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

位于 App 底部，方便用户在不同功能模块之间进行快速切换。

规则

用作 App 的一级分类，数量控制在 3-5 个之间。
即使某个 Tab 不可用，也不要禁用或者移除该 Tab。
使用 Badge 进行提示，足不出户也能知道有内容更新。
标签栏的位置相对于父级组件，而非整个页面视区，若需标签栏刚好固定于页面底部，请将父级组件高度设置为视区高度。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {TabBar, TabBarItem} from '@21cnfe/vui'  
Vue.component('TabBar', TabBar)  
Vue.component('TabBarItem', TabBarItem)

代码演示

TabBar 标签栏 tabBars

基本用法主要通过在 BarItem 中使用插槽添加自定义内容，可通过添加 selected 属性指定初始化面板，其他属性用法可参照 Tabs 组件

<tabBar tabBarPosition="bottom">
  <tabBarItem title="tab1" :icon="icon" :selectedIcon="icon11">
    <div class="tabDemo">
      <div>tab1 content</div>
    </div>
  </tabBarItem>
  <tabBarItem selected title="tab2" :icon="icon" :selectedIcon="icon11">
    <div class="tabDemo">
      <div>tab2 content</div>
    </div>
  </tabBarItem>
  <tabBarItem title="tab3" :icon="icon" :selectedIcon="icon11">
    <div class="tabDemo">
      <div>tab3 content</div>
    </div>
  </tabBarItem>
</tabBar>

路由模式组件提供 `route` 属性切换至路由模式，点击切换图标，不再是切换面板，而是切换当前路由

<tabBar route tabBarPosition="bottom" @onChange="changeBack">
  <tabBarItem title="tab1" :icon="icon1" :selectedIcon="icon11" link="button">
  </tabBarItem>
  <tabBarItem selected title="tab2" :icon="icon1" :selectedIcon="icon11" link="icon">
  </tabBarItem>
  <tabBarItem  title="tab3" :icon="icon1" :selectedIcon="icon11" link="result">
  </tabBarItem>
</tabBar>

API

TabBar

属性	说明	类型	默认值
`barTintColor`	tabbar 背景色	String	`white`
`tintColor`	选中的字体颜色	String	`#108ee9`
`unselectedTintColor`	未选中的字体颜色	String	`#888`
`tabBarPosition`	tabbar 位置 ,可选值： ‘top’\|’bottom’	String	`bottom`
`route`	切换至路由模式	Boolean	`false`

TabBar.BarItem

属性	说明	类型	默认值
`badge`	徽标数	Number \ String	`--`
`dot`	是否在右上角显示小红点（在设置badge的情况下失效）	Boolean	`false`
`icon`	默认展示图片	见 demo	`--`
`selected`	是否选中	Boolean	`false`
`selectedIcon`	选中后的展示图片	见 demo	`--`
`title`	标题文字	String	`--`
`key`	唯一标识	String	`--`
`link`	`route` 模式下传入路由路径	String	`--`

Event

事件名称	说明	回调参数
`onChange`	切换发生变化时的回调函数	当前面板的数据`item`

1. TabBar 标签栏 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

TabBar 标签栏 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

TabBar

TabBar.BarItem

Event

TabBar 标签栏 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用