uni-app写app的内容会与沉浸栏重合在一起,写好好多,都是有点问题的,这次终于找到解决的方法了,与大家分享一下
- 最简单的解决方式就是配置mainfest.json来关闭沉浸式。即通过打开应用的manifest.json文件,切换到代码视图,在app-plus -> statusbar 下添加immersed节点并设置值为false。
"app-plus" : {
"statusbar": {
"immersed": false
},
}
App因为默认为沉浸式,去除导航栏
后,页面顶部会直通到状态栏
的区域,可能出现如下需求:
- 改变状态栏文字颜色:设置该页面的 navigationBarTextStyle 属性,可取值为 black/white。如果想单独设置颜色,App端可使用plus.navigator.setStatusBarStyle设置。部分低端Android手机
- 自身不支持设置状态栏前景色。
- 改变状态栏背景颜色:通过绘制一个占位的view固定放在状态栏位置,设置此view的背景颜色,即可达到想要的效果,uni-app提供了一个状态栏高度的css变量,具体参考:uni-app内置的CSS变量。
<template> <view> <!-- #ifdef APP-PLUS --> <view class="status_bar"> <view class="top_view"></view> </view> <!-- #endif --> <view> </view> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style> .status_bar { height: var(--status-bar-height); width: 100%; background-color: #F8F8F8; } .top_view { height: var(--status-bar-height); width: 100%; position: fixed; background-color: #F8F8F8; top: 0; z-index: 999; } </style>
- var(--status-bar-height) 此变量在微信小程序环境为固定 25px,在 5 App 里为手机实际状态栏高度。
- 当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏。(实战过程中此方案仍不能解决页面内容出现在状态栏的问题)
设置css变量后解决页面顶部会直通到状态栏的区域的问题
:设置了css变量后,手机顶部状态栏区域还是会被页面内容覆盖,可使用plus.navigator.getStatusbarHeight();动态计算系统状态栏的高度barHeight,然后设置页面主view的样式:style="{‘margin-top‘:barHeight ‘px‘}",
来解决。
<template> <view class="uni-flex uni-column" style="height: 100%;"> <!-- #ifdef APP-PLUS --> <view class="status_bar"> <view class="top_view"></view> </view> <!-- #endif --> <view class="uni-flex uni-row jk-bg-blue uni-center" style="height: 12%;" :style="{‘margin-top‘:barHeight ‘px‘}"> <view class="flex-sub jk-header uni-flex uni-column justify-start" @tap="test1"> <text class="text-white cuIcon-scan"></text> <text>扫码</text> </view> <view class="flex-treble jk-header uni-flex uni-column justify-center" @tap="test2"> <text class="text-white cuIcon-rank"></text> <text>统计</text> </view> <view class="flex-sub jk-header uni-flex uni-column justify-end" @click="test3"> <text class="text-white cuIcon-exit"></text> <text>退出</text> </view> </view> <view class="uni-flex align-center uni-row margin-xs" style="height: 78%;"> </view> <view class="uni-flex uni-row uni-center" style="height: 10%;color: #000000;background-color: F8F8F8;border-top: 3px solid #eee;"> </view> </view> </template> <script> var _self; export default { components: { uniPopup, }, data() { return { barHeight:25, } }, methods: { //获取系统状态栏高度 getSystemStatusBarHeight:function(){ // #ifdef APP-PLUS var height = plus.navigator.getStatusbarHeight(); _self.barHeight = height; // #endif // #ifdef H5 _self.barHeight = 0; // #endif }, }, onLoad:function(){ _self = this; _self.getSystemStatusBarHeight(); } } </script> <style> </style>