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

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

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在线更新 MUI在线差量资源更新 新手教程通俗易懂

MUI在线更新MUI在线差量资源更新新手教程通俗易懂更新不难,只是刚刚接触的时[&h...

星宿UI 0.4 多端开源小程序优化 支持qq小程序添加好友 激励视频等

喜欢你,像风走了八千里,不问归期。喜欢你,像雪肆虐着大地,茫茫无际。喜欢你,像星[&...

在线图片压缩,如何压缩图片大小,在线图片压缩工具源码v1.0

你应该听过“不忘初心,方得始终”这句话吧但你知道下一句是“初心易得,始终难守”吗[&...

uni-app 前后端实战课 -《悦读》百度云视频

uni-app前后端实战课-《悦读》百度云视频uni-app实战教程R[&he...