【转】MUI 控制状态栏颜色 沉浸式状态栏（变色）附带2种方式

fengrui99

原文来自地址：https://www.frbkw.com/916/


方式一：(推选)首先在界面添加script标签添加如下代码

[JavaScript] 纯文本查看 复制代码

function plusReady(){
			// 设置系统状态栏背景为蓝色
			plus.navigator.setStatusBarBackground( "#007AFF" );
			// 设置系统状态栏样式为浅色文字
			plus.navigator.setStatusBarStyle( "UIStatusBarStyleBlackOpaque" );
			}
			if(window.plus){
			plusReady();
			}else{
			document.addEventListener("plusready",plusReady,false);
		}

这样就建立了一个状态栏的颜色,随后我们在mui的header 中添加背景颜色style，在head部分添加style标签 添加如下代码

[CSS] 纯文本查看 复制代码

.mui-bar{background-color:#ff0707}
/*设置为蓝色*/
.mui-title{color:ffffff}
/*标题颜色为白色*/

这样的话 每个新的界面都是在设置一次， 在设置为时候不要忘记了字体的颜色，如果无法修改header颜色的话 那就行内修改了方式二：方式二麻烦 是真的麻烦
首先在manifest.json文件下的plues中添加

[JavaScript] 纯文本查看 复制代码

"plus": {
		"splashscreen": {
			"autoclose": true,/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/
			"waiting": true
		},
		"launchwebview": {
		    "statusbar": {
		        "background": "#ff0707"/*设置状态栏颜色*/
		    }
		},
		"statusbar":{
			"immersed":true /*开启沉浸式*/
		},

添加好了后 如果首页加代码
首先无论是launchwebview还是secondwebview，都是在manifest.json中配置相关的参数信息。
manifest.json->plus->launchwebview无标题

[Asm] 纯文本查看 复制代码

webview = plus.webview.create('test.html', 'test', {
    statusbar: {
        background: '#1478ee'
    }
});

有标题

[Asm] 纯文本查看 复制代码

webview = plus.webview.create('test.html', 'test', {
    titleNView: {
        titleText: '测试页',
        backgroundColor: '#fb6f18'
    }
});

valueble123

感谢分享

素颜朝天

可以试一试

youyudewo99

电脑看多了容易眼花的，  突然给看成了，   MUI 系统会控制状态栏颜色【变色】， 前提是手机外壳

fengrui99

youyudewo99 发表于 2018-8-13 20:29
电脑看多了容易眼花的，  突然给看成了，   MUI 系统会控制状态栏颜色【变色】， 前提是手机外壳

这个我会大佬 利用眼角膜折射获取颜色，更在手机壳颜色，