---
url: /mobile/components/tabbar.md
---
# Tabbar 底部标签栏

移动端一级导航：`EbTabbar` + `EbTabbarItem` 固定吸底（fixed）+ 全面屏安全区适配 +
等高占位（placeholder，防止脱离文档流后遮挡内容尾部）。页内内容切换由业务持有
`v-model`；页签未设 `name` 时以注册顺序索引为标识。`fixed: false` 可作为普通块级
标签栏内联使用（如卡片底部、演示壳内）。多级菜单压平为底部页签的完整规则见
[移动端 · 布局与导航壳](/mobile/layout)。

## 基础用法

```html
<!-- 真机：fixed 吸底 + 安全区适配 + 自动占位，内容切换由 v-model 驱动 -->
<eb-tabbar v-model="tab">
  <eb-tabbar-item name="home" icon="home">首页</eb-tabbar-item>
  <eb-tabbar-item name="orders" icon="file-list" badge="6">订单</eb-tabbar-item>
  <eb-tabbar-item name="msgs" icon="chat" dot>消息</eb-tabbar-item>
  <eb-tabbar-item name="mine" icon="user">我的</eb-tabbar-item>
</eb-tabbar>
```

```js
const tab = ref('home')
// watch(tab) 切换页内内容；跨页跳转直接 tab.value = 'mine'
```

要点：

* **吸底三件**：`fixed` 脱离文档流吸底、`safe-area-inset-bottom` 适配全面屏安全区、
  `placeholder` 自动渲染等高占位——三者默认全开，普通页面零配置。
* **未读表达**：`dot` 红点与 `badge` 角标都渲染在图标右上角，dot 优先；角标读数来自
  页面状态，标签栏与页面数据同源。

## 图标与选中态

页签图标用 `icon` 属性（eb-icon 名）；需要区分选中态时用 `#icon` 插槽（参数
`active`）。未注册的图标名需先注册（见 [Icon](/components/icon)）。

## API