TabBar 配置

路径：UI管理 → TabBar配置（pages_admin/ui-tabbar/index）

按区域配置 C 端底部导航：显示开关、样式（含胶囊/液态玻璃）、最多 5 个导航项，以及发布弹窗入口。与页面画布分开保存——改 TabBar 不会自动改首页内容。

按区域统一配置 C 端底部 TabBar（xiaoyi-tabbar）：显示开关、样式、最多 5 个导航项及发布弹窗。与页面画布独立存储，改 TabBar 不会自动改首页内容。

UI管理 → TabBar配置·运营 / UI 编辑人员pages_admin/ui-tabbar/index

管理后台 H5 可访问
账号具备 page.tabbar update 权限
Tab 跳转目标页面已在「页面配置」中创建并启用

页面是做什么的

控制用户端底部导航栏「有没有、长什么样、点哪去哪」，不是编辑 Tab 页里的具体内容。

配置按 region_id 存储：0 = 全平台默认，具体区域可单独覆盖
同区域所有 Tab 页共用一套 TabBar；保存后 C 端拉取 /api/system/tabbar（有缓存）
首页列表、圈子内容等由「页面配置 → UI 编辑器」控制，与 TabBar 分开保存
最多 5 个导航项；中间项常设为「发布弹窗」入口

页面布局（宽屏 / 手机）

左侧预览区可点击切换选中 Tab，样式改动会即时反映；与 App 内 xiaoyi-tabbar 组件一致。

宽屏（推荐）左侧：区域筛选 + 状态芯片 + TabBar 实时预览 + 发布弹窗预览；右侧：配置编辑面板

窄屏 / 手机管理端顶部「预览 / 配置编辑」切换；区域筛选在预览 Tab 上方；右上角「保存配置」

状态芯片全平台默认 / 显示或隐藏 TabBar / N 个导航项 — 一眼看当前配置概况

从零配置（推荐流程）

1
选区域首次建议选「全部」配全平台默认 TabBar；须与「页面配置」编辑区域一致
2
确认显示右侧 TabBar 面板 → 显示设置 →「显示」（除非刻意隐藏整个底栏）
3
加导航项导航项目 →「+ 添加导航」→ 依次配图标、文字、跳转（最多 5 个）
4
Tab 页用 switchTab跳转方式选「TabBar 页面」，路径选 pages.json 里的 tab 页（如首页、我的）
5
配 Tab 页内容到「页面配置」编辑 home/feature 等画布并启用 — TabBar 只负责跳转，不负责 Tab 内 UI
6
发布按钮（可选）某一导航项跳转选「发布弹窗」→ 切到「发布弹窗」面板配标题、菜单、样式
7
调外观TabBar 样式：背景色、胶囊模式、圆角等；左侧预览确认效果
8
保存配置点右上角「保存配置」— 未保存离开会丢失修改
9
客户端验证小程序/H5 强刷或重新进入 Tab 页，确认底栏与跳转正确

快速上手（页面配置）文档

从零搭建首页（含 TabBar 第 9 步）文档

区域与继承

全平台默认（region_id=0）未单独配置的区域回退到这里

指定区域切换区域筛选后加载/保存该区域专属 config；覆盖同名全平台项

与页面配置的关系TabBar 管底栏；各 Tab 页内容仍到「页面配置」编辑，两者需分别保存

显示设置

显示 / 隐藏隐藏后 C 端不渲染整个底部 TabBar（慎用，用户将无法通过底栏切换 Tab）

点击短震动开启后用户点击 Tab 项时有触觉反馈（默认开启）

TabBar 样式

分「外观」「圆角」两个子 Tab；胶囊模式开启后额外出现液态玻璃参数。

外观 · 背景/边框背景颜色、边框颜色

外观 · 胶囊模式（悬浮）底栏变为左右留空的悬浮胶囊；可设左右边距（rpx，默认 60）

外观 · 液态玻璃胶囊模式下：模糊强度、饱和度、玻璃背景/边框色、边框宽度、阴影、光泽高光

圆角 · 横条模式未开胶囊时：仅上左、上右圆角（靠内容一侧）

圆角 · 胶囊模式统一圆角（默认 32）或四角单独设；空角用统一圆角

导航项目（最多 5 个）

每个导航项一张卡片：导航1、导航2… 右上角 ✕ 可删除
卡片内分三个子 Tab：图标 / 文字 / 跳转
底部「+ 添加导航 (最多5个)」新增一项，默认带占位图标与「标签」文案
previewSelectedIndex 与左侧预览选中项联动

导航项 · 图标

展示模式：图标常规 Tab 图标

展示模式：头像显示当前登录用户头像；边框色跟随文字默认/选中色；图标大小控制头像尺寸

图片模式默认图标、选中图标（文件库选 URL）；图标大小、图标圆角

Icon 模式默认/选中图标名（图标选择器）；图标前缀、大小、默认/选中颜色

导航项 · 文字

标签文字底栏显示文案，如「首页」「消息」

字号 / 字重默认与选中可分别设字号、字重（常规/中等/半粗/粗体）

颜色默认颜色、选中颜色

隐藏文字仅显示图标（适合中间发布按钮）

导航项 · 跳转

通过「跳转方式」选择点击行为；TabBar 页必须用 switchTab。

路径填错会导致点击空白或报错；目标页须在「页面配置」已启用且路由存在。

TabBar 页面（switchTab）跳转到 pages.json 注册的 tab 页 — 首页、圈子、消息、我的等

普通页面navigateTo / redirectTo / reLaunch 跳转非 tab 页

发布弹窗点击弹出 xiaoyi-publish-popup；详细配置切到「发布弹窗」面板

无点击不跳转（纯展示或配合其他逻辑）

右侧面板顶部 Tab 切换到「发布弹窗」；须先在某一导航项跳转里选「发布弹窗」。

1
设入口TabBar 面板 → 某导航项 → 跳转 → 选「发布弹窗」（常放在中间项并隐藏文字）
2
关联导航项发布弹窗面板顶部切换要编辑的导航项（可多个入口）
3
弹窗文案标题（默认「发布内容」）、描述（默认「选择要发布的内容类型」）
4
菜单模板跟随区域默认或单独指定布局（1/2/3 种排版）
5
功能菜单勾选/排序发布类型：发笔记、发闲置、发投票等（受模块与权限控制）
6
外观样式主题预设 + 自定义颜色/圆角等
7
预览左侧「发布弹窗预览」选中对应 Tab 时实时展示；保存 TabBar 后 C 端生效

常见 Tab 对应关系

首页switchTab → 应用首页（home）— 内容在页面配置编辑

发现 / 圈子switchTab → 功能页（feature）或圈子相关 tab

消息switchTab → 消息中心（news）

我的switchTab → 个人中心（profile）

中间 +跳转 → 发布弹窗；图标可设凸起样式，文字可隐藏

页面类型说明文档

与页面配置的配合

典型上线顺序：① 页面配置搭好并启用各 Tab 页 UI → ② TabBar 配置 switchTab 与发布弹窗 → ③ 分别保存。新手建议先读快速上手，首页完整案例见搭建教程。

每个 Tab 的 switchTab 路径在 pages.json / 页面配置中存在
目标页面类型已启用（home、feature、news、profile 等）
发布弹窗里的发布类型对应模块已开通（圈子笔记、闲置、投票等）
TabBar 保存与各 Tab 页 UI 保存是两次独立操作
区域筛选：TabBar 与页面配置须选同一区域（平台默认或同一校区）

快速上手文档

从零搭建首页文档

页面类型说明文档

权限说明

page.tabbar update显示「保存配置」按钮并可提交

page.tabbar write更广泛的写权限（与 update 配合，部分批量操作依赖）

管理端权限文档

验证清单

保存后刷新后台，导航项数量与客户端一致
左侧预览与 C 端底栏样式一致（含胶囊/玻璃效果）
各 Tab switchTab 能正确切换且页面有内容
发布弹窗入口点击弹出，菜单项与配置一致
切换区域后，该区域用户看到对应 TabBar 配置

常见问题

快速上手文档

从零搭建首页文档

改了 TabBar 首页内容没变正常。首页内容由「页面配置 → 应用首页」控制，不是 TabBar。

Tab 点击无反应或空白页检查跳转路径、页面是否启用、业务模块是否开通。

保存了客户端没变化TabBar 有约 5 分钟本地缓存；强刷、杀进程重进，或换账号/区域验证。

发布弹窗面板是空的须先在 TabBar 面板把某导航项跳转设为「发布弹窗」。

想隐藏某个 Tab删除该导航项或切到目标区域单独配一套 TabBar（项数可少于全平台）。

整个 App 不要底栏显示设置选「隐藏」并保存（确认产品确实不需要 Tab 导航）。

TabBar 配置 ​