微信小程序不支持navigationbarbackgroundcolor设为transparent，必须用custom模式手写导航栏并用css变量--status-bar-height控制状态栏区域样式，同时清空背景色、阴影和边框以实现真正透明。
微信小程序不支持直接设导航栏背景为透明，必须用 custom 模式手写导航栏，并手动控制状态栏区域样式。
为什么 navigationBarBackgroundColor: "transparent" 在小程序里无效
这个配置只在 App 端（iOS/Android）生效，微信小程序压根不识别 navigationBarBackgroundColor 的 transparent 值。你写了也没用，真机跑起来还是默认白底或黑底。
常见错误是照搬 App 端写法，在 pages.json 里加：
"navigationBarBackgroundColor": "transparent"
结果小程序编译不报错，但运行时完全没反应——因为微信基础库根本没实现这个逻辑。
必须设 navigationStyle: "custom" 并用 CSS 变量占位
这是唯一可靠路径。custom 不是“变透明”，而是“交出控制权”，之后所有渲染都由你负责。
- 在
pages.json对应页面的style节点下加："navigationStyle": "custom"
- 同时必须配
"navigationBarTextStyle": "white"或"black"，否则状态栏文字颜色不可控 - 页面根容器（如最外层
<view></view>）加padding-top: var(--status-bar-height)，不能写死20px -
--status-bar-height是 uni-app 注入的 CSS 变量，仅在 custom 模式下可用，且已适配 iOS/Android 差异
手写导航栏容器怎么设背景才真正“透明”
所谓透明，是指容器背景色为 transparent，且不遮挡下方内容。但要注意几个关键点：
- 容器高度得是
calc(var(--status-bar-height) + 44px)，44px 是常规导航栏内容区高度 - 背景不能只靠
background-color: transparent，还得清掉可能存在的阴影、边框、半透叠加层 - 如果用了
<uni-nav-bar></uni-nav-bar>，它默认带background-color: #fff，必须显式绑定：:background-color="transparent"
- 若想叠加渐变或图片，得用
background-image+background-size: 100% 100%，再叠一层linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2))防文字看不清
滚动时动态改透明度，别只用 opacity
直接改整个导航栏的 opacity 会让文字发虚，尤其 iOS 上明显。更稳妥的做法是：
- 监听
onPageScroll，拿到e.scrollTop - 用
scrollTop控制background-color的 rgba 透明度，比如：`rgba(255, 255, 255, ${Math.min(scrollTop / 120, 1)})` - 背景图保持常驻，只调背景色遮罩层，避免图像缩放抖动
- iOS 状态栏文字颜色要同步切：当背景变浅时调
uni.setStatusBarStyle('dark')，且只在 iOS 平台执行
最易被忽略的是：custom 导航栏内不能放输入框或可滚动区域，软键盘弹起会顶穿状态栏，导致布局错乱。这不是样式问题，是原生层叠加顺序限制。
