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)
|
代码演示
基本用法
主要通过在 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 |
