navigationstyle: "custom" 仅交出控制权,需同步三件事:css占位(padding-top: var(--status-bar-height))、背景透明、js调uni.setstatusbarstyle切ios文字色;--status-bar-height比js获取更可靠;下拉/键盘时需兜底关闭透明。

navigationStyle: "custom" 是前提,但不等于透明
设了 navigationStyle: "custom" 后状态栏还是不透明,不是配置失效,而是它只交出控制权,不自动设透明。你写的自定义导航栏(比如 <view class="nav"></view>)默认仍渲染在普通层,会被原生状态栏遮挡或重叠,视觉上像“没反应”。必须三件事同步做:CSS 占位、背景透明、JS 控制文字颜色。
用 --status-bar-height 而不是 uni.getSystemInfoSync().statusBarHeight
JS 获取高度不稳定:iOS 返回真实像素(如 47),Android 多数返回 24–25,但全面屏/刘海屏下系统可能动态拉高;H5 和小程序甚至不返回该字段。而 --status-bar-height 是 uni-app 在 App 端运行时注入的 CSS 变量,已适配各平台,更可靠。
- 页面根容器加
padding-top: var(--status-bar-height),防止内容被遮挡 - 自定义导航栏元素(如
<view class="nav"></view>)必须设background-color: transparent - 不能有
box-shadow、border或半透叠加色,否则破坏沉浸感 - 若用
<uni-nav-bar></uni-nav-bar>,需显式绑定:background-color="transparent"
uni.setStatusBarStyle 才能切 iOS 文字颜色,setNavigationBarColor 不行
uni.setNavigationBarColor 的 style 参数只作用于原生导航栏,你在 navigationStyle: "custom" 下调它,对状态栏文字完全无效。iOS 必须调 uni.setStatusBarStyle('light') 或 'dark',且时机关键:
- 不能在
onLoad立即调——plus对象可能未就绪 - 建议放在
onReady后,或与导航栏背景变化联动(比如渐变栏变浅时立刻调setStatusBarStyle('dark')) - Android 不支持该 API,务必用
uni.getSystemInfoSync().platform === 'ios'包一层判断 - 微信小程序端可用
navigationBarTextStyle配置,但仅限navigationStyle: "default"场景;custom 模式下需条件编译或原生桥接
下拉刷新和软键盘会破坏沉浸效果,必须兜底
开启 "enablePullDownRefresh": true 后,webview 整体下拉,透明导航栏下的内容直接顶入状态栏区域,Android 容易变黑或闪烁;软键盘弹出也会顶起页面,破坏布局。
- 下拉期间临时关闭透明效果:加 class
{'nav-transparent': !isPulling},onPullDownRefresh设isPulling = true,stopPullDownRefresh后设isPulling = false - 含搜索框、输入框的页面,慎用 custom 模式;若必须用,避免放可滚动区域或改用原生输入组件
- 真机调试必须用正式打包包——开发基座常忽略
immersed配置,导致plus.navigator.isImmersedStatusbar()返回false











