不能在原生导航栏或 tabbar 区域直接加进度条,因二者均为独立渲染层且不支持动态 ui;唯一全端稳定方案是使用悬浮进度条并适配安全区与 tabbar 高度。

不能直接在原生导航栏(navigationBar)或 tabBar 区域里加进度条——uni-app 的 navigationStyle: custom 仅控制顶部导航栏,而底部 tabBar 是独立渲染层,两者都不支持嵌入动态进度 UI。
为什么 navigationBar 下方加不了进度条
uni-app 的 navigationBar 高度固定(默认 44px 或 64px),且其 DOM 容器由引擎托管,不开放插入自定义节点的入口;即使设 navigationStyle: custom,也只是替换顶部区域,对下方「页面内容区」无影响。所谓“导航栏底部”实际是页面容器的顶部边缘,不是可复用的全局 UI 层。
- 试图用
position: fixed; top: 44px贴在 navigationBar 下方:iOS WebView 和小程序端常因视口计算偏差导致错位,滚动时还可能随页面一起偏移 - 在
pages.json的tabBar配置里强行加进度:tabBar 是原生渲染区块,不支持动态样式或 JS 控制,uni-progress组件无法挂载进去 - 用
plus.nativeObj.View在原生层画进度条:仅 App 端可行,H5 和小程序完全不兼容,且需手动处理生命周期和 z-index 冲突
真正能落地的替代方案:悬浮进度条 + 安全区适配
把进度条作为页面级悬浮组件,固定在屏幕底部上方(避开 tabBar),同时兼容 iOS 安全区和安卓虚拟键。这是目前唯一全端稳定、可交互、可更新的解法。
- 容器用
position: fixed; bottom: env(safe-area-inset-bottom, 0); left: 0; right: 0;,高度预留 tabBar 高度(通常 50–100rpx) - 进度条本身用
uni-progress或纯 CSS 实现,避免 canvas(小程序 Canvas 在 fixed 容器中易渲染异常) - 必须在
onShow中动态读取uni.getSystemInfoSync().screenHeight和tabBar配置高度,防止 H5 端因缩放失准 - 若需全局复用,封装为
progress-bar-below-tabbar.vue,通过v-model或$emit接收进度值,不依赖 Vuex
App 端通知栏进度条 ≠ 页面底部进度条
别混淆这两个概念:plus.notification.createNotification 的进度条只出现在 Android 下拉通知栏,和页面 UI 完全无关;它不能定位到屏幕底部,也不能响应点击事件,更不会在小程序/H5 生效。
- 你在页面里调
uni.showToast或更新<progress></progress>标签,对通知栏毫无影响 - 通知栏进度条 ID 必须全局唯一,且
ongoing: true才能持续更新;但它的存在不影响页面布局,也绝不该被当成“底部进度条”的替代品 - 真要双端同步反馈,得分开实现:页面内用悬浮进度条 + App 端额外推通知栏进度(条件编译
#ifdef APP-PLUS)
最易被忽略的是:iOS 安全区 bottom 值在横屏/键盘弹出时会动态变化,单纯写死 bottom: 100rpx 在真机上大概率遮挡或悬空——必须用 env(safe-area-inset-bottom) 并配合 @media (orientation: landscape) 做兜底。另外,所有 fixed 元素在微信小程序里若父容器有 transform,会触发渲染 bug,务必检查外层是否误加了 scale 或 translateZ。











