MUI 控制状态栏颜色 沉浸式状态栏(变色)附带2种方式

作者 : 枫瑞博客 本文共1268个字,预计阅读时间需要4分钟 发布时间: 2018-07-27 共3.7K人阅读

MUI 控制状态栏颜色 沉浸式状态栏(变色)附带2种方式

在Andriod 4.0+的时候Google就开放了这个,可是到现在的Andriod 9.0了还是有很多应用没有去适配
小软件就算了,可是有些大软件你们怎么了,适配一下会死啊 会死啊 会死啊 CNMM

首先我们看下效果 (图片来自网络,为啥呢 因为枫瑞博客刚刚买了一部美人尖手机 还是9.0系统哦 )
MUI 控制状态栏颜色 沉浸式状态栏(变色)附带2种方式

2中方式去实现 推选方式一 因为简单但是也有一些小不足

方式一:(推选)

首先在界面添加script标签添加如下代码

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

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


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

 

这样的话 每个新的界面都是在设置一次, 在设置为时候不要忘记了字体的颜色,如果无法修改header颜色的话 那就行内修改了

方式二:

方式二麻烦 是真的麻烦
首先在manifest.json文件下的plues中添加

"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

无标题

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

 

有头部标题

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

 

枫瑞博客网 一个只想努力找富婆不想努力的人
枫瑞博客网 » MUI 控制状态栏颜色 沉浸式状态栏(变色)附带2种方式

常见问题FAQ

枫瑞你想努力吗?
不 ,我只想找富婆