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

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

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

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

 

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

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

 

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

js:

 

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

css:

 

.stat{

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

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

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