uni-app沉浸式状态栏怎么设置paddingTop-uni-app-PHP中文网

必须设置 navigationstyle: "custom" 才能启用 --status-bar-height 变量，该变量由 uni-app 运行时注入、跨平台精准适配状态栏高度，css 中直接使用 padding-top: var(--status-bar-height) 即可。

uni-app沉浸式状态栏怎么设置paddingtop

pages.json里必须设 navigationStyle: "custom"

不设这个，padding-top: var(--status-bar-height) 就是无效的——--status-bar-height 这个 CSS 变量只在 navigationStyle: "custom" 模式下由 uni-app 注入。它不是“美化开关”，而是把导航栏控制权交还给前端的硬性前提。只改 titleNView: false 或只设 navigationBarBackgroundColor 都不能触发该变量。

直接用 CSS 变量，别调 uni.getSystemInfoSync()

uni.getSystemInfoSync().statusBarHeight 在 Android 上常返回 24 或 25，全面屏/刘海屏机型可能不准；iOS 返回值虽准但单位是 px，H5 和小程序环境甚至返回 undefined。而 --status-bar-height 是运行时注入的 CSS 变量，已适配各平台真实渲染高度。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

根容器（如 <page></page> 或最外层 <view></view>）加：padding-top: var(--status-bar-height);
若需固定高度导航栏（如 44px），可用：height: calc(var(--status-bar-height) + 44px);
不要在 onLoad 里读取该变量，此时 DOM 未就绪；真需 JS 获取，等 onReady 后用：getComputedStyle(document.documentElement).getPropertyValue('--status-bar-height')

下拉刷新时 padding-top 会失效？要加状态隔离

开启 "enablePullDownRefresh": true 后，整个 webview 被拖动，导致原本靠 padding-top 占位的内容被顶进状态栏区域，Android 常出现黑屏或闪烁。这不是样式没写对，而是原生层叠加顺序问题。

下拉中临时禁用 padding 占位逻辑，比如用 :class="{ 'no-status-padding': isPulling }"
onPullDownRefresh 里设 isPulling = true，stopPullDownRefresh 后设 isPulling = false
对应 CSS 中写：.no-status-padding { padding-top: 0 !important; }