直播系统源代码，uni-app 设置状态栏背景色

直播系统源代码，uni-app 设置状态栏背景色

在开发中遇到需求是：关闭H5和APP端原生导航栏，但APP端要设置状态栏 背景色。

首先我们要在page.json文件中关闭原生导航栏，设置状态类字体颜色。代码如下：

 

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

​然后我们在页面中创建view标签，设置动态高度及获取状态栏高度。代码如下：

 

1	<br><!-- 状态栏 --><br><view :style="{ height: iStatusBarHeight + 'px'}" class="stat"></view>

js:

 

1	export default {<br>        data() {<br>            return {<br>                iStatusBarHeight:0<br>            }<br>        },<br>        onLoad() {<br>            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight<br>        }<br>    }

css:

 

1	.stat{<br><br>position: fixed;<br>z-index: 1;<br>height: var(--status-bar-height);// --status-bar-height系统状态栏高度<br>width: 100%;<br>top: 0;<br>left: 0;<br>}

取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(–status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。

以上就是 直播系统源代码，uni-app 设置状态栏背景色，更多内容欢迎关注之后的文章