# Tabbar 底部导航栏 [toc] 本组件为自定义底部导航栏，在原先导航栏的基础上加入了红点、半圆形图标等功能。 ## 组件引入在`app.json`或在页面`index.json`中引入： ```json { "usingComponents": { "tea-tabbar": "../dist/tabbar/index" } } ``` ## 用法 ### 基本用法 ```html

``` ### 路由跳转 ```html

``` ### 异步改变value 值 ```html

``` ### 指定字体颜色和字体大小 ```html

``` ### 使用图片 ```html

``` ### 使用图标 ```html

``` ### 自定义背景颜色和背景图 ```html

``` ### 自定义半圆形图片 ```html

``` ### 指定半圆形的大小 ```html

``` ### 支持下划线 ```html

``` ### 自定义半圆形图标 ```html

``` ### 红点 ```html

``` ## Props | 参数 | 描述 | 类型 | 默认值 | 可选值 | | --------------- | ----------- | --------------- | --------- | ---------------------------- | | value | 当前选中的tab值 | `String` | - | - | | textSize | 导航中的字体大小 | `String,Number` | `12` | - | | position | 导航的位置 | `String` | `bottom` | `['top', 'bottom', 'unset']` | | color | 图标和文字的常规颜色 | `String` | `#444444` | - | | activeColor | 图标和文字激活态的颜色 | `String` | `#006EFF` | - | | iconSize | 导航中使用图标的大小 | `String,Number` | `24` | - | | backgroundColor | 自定义导航的背景颜色 | `String` | `#FFFFFF` | - | | backgroundImage | 自定义导航的背景图片 | `String` | - | - | | route | 是否开启路由跳转模式 | `Boolean` | `false` | - | | underline | 是否支持下划线 | `Boolean` | `false` | - | ## 事件 | 事件名 | 描述 | 回调参数 | | ------ | ------------- | ---------- | | change | 当导航切换的时候触发 | 当前导航的name值 | | circle | 当圆形图标被点击的时候出发 | - | ## Slots | 名称 | 描述 | | --- | ------------------ | | - | 插入`tabbar-item`子节点 | ## 外部样式类 | 类名 | 描述 | | ----------- | -------- | | `ext-class` | 组件根节点样式类 | ## CSS变量属性表 | 变量名 | 默认值 | 描述 | | ------------- | -------------------- | --- | | tabbar-height | @item-height-default | - |