var(--status-bar-height) 此变量在微信小程序环境为固定 25px,在 App 里为手机实际状态栏高度。"navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏。--status-bar-height变量,替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度,然后通过 style 绑定方式给占位 view 设定高度。下方提供了示例代码- <template>
-
- <page-meta>
- <navigation-bar />
- page-meta>
- <view>
- <view class="status_bar">
-
- view>
- <view>状态栏下的文字view>
- view>
- template>
- <style>
- .status_bar {
- height: var(--status-bar-height);
- width: 100%;
- }
- style>