← 返回 Web 词条
底部标签栏
Web 原生没有这个
Web 没有专门对应移动端底部标签栏的原生组件。网站的主要目的地应使用导航链接;只有在同一页面内切换成组内容时,才应使用标签页交互。
通常怎么做:主要页面入口使用 <nav> 包裹链接并通过样式固定到底部;页内面板切换才采用 ARIA Tabs。
它是固定在页面底部的一排入口,用来在几个同级的主要页面之间来回切换。
- 手机下面那排切换页面的按钮
- 底下有首页消息我的那一排
- 点底下图标换页面的东西
- 底部标签栏
- 底部导航栏
- 页签栏
- 主导航栏
其他平台的相似实现
iOS原生支持
Tab Bar本平台没有对应叫法Tab Bar 用于应用最顶层的少量同级区域,通常持续显示在屏幕底部,并明确标出当前所在区域。
看 iOS 视角 →Android原生支持
Navigation Bar本平台没有对应叫法Material 3 把旧称 Bottom Navigation 改为 Navigation Bar,用于三个到五个同等重要的主要目的地。
看 Android 视角 →使用规范
什么时候用
- 应用有少量、长期稳定且同等重要的一级页面
- 用户需要频繁在这些一级页面之间来回切换
- 每个入口都能用简短文字和易懂图标表达
- 当前所在的一级页面需要始终清楚标出,切换后仍保留各页面内部状态
什么时候别用
- 页面存在前后层级或需要返回上一级 → 用 Navigation Bar 或 Top App Bar
- 入口超过五个或经常变化 → 改用其他导航结构
- 用于同一页面里的内容筛选 → 用 Segmented Control 或 Tabs
容易混淆
Web 出处
查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例。