效果图

 

也可以自己使用定位方式去覆盖状态栏颜色

manifest.json

首先去对应的页面配置

"pages": [
{
"path": "pages/MY/index",
"style": {
"navigationBarTitleText": "我的",
"navigationBarTextStyle": "black",//设置状态类字体颜色，只支持white、black这两个颜色
"app-plus":{"titleNView":false }//关闭H5和APP原生导航栏

}

},

]

页面template，这里要完成上一步才可以

<view :style="{ height: statusBarHeights + 'px'}" class="BarColors"></view>

css部分

.BarColors{
width: 100%;
height: var(--status-bar-height);// --status-bar-height系统状态栏高度
background-color: #BEF000;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}

js部分

import organPopup from "./components/organPopup.vue";
export default {
components: {
organPopup,
},
data() {
return {
statusBarHeights:0
}

},
onLoad() {
this.statusBarHeights = uni.getSystemInfoSync().statusBarHeight;//页面载入获取状态栏高度
}
}

如果需要状态栏没有颜色，则需要配置"statusbar": { "immersed": false },