mui设置手机状态栏样式的两种方式

最新推荐文章于 2022-10-24 16:46:36 发布

weixin_34150224

最新推荐文章于 2022-10-24 16:46:36 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： python 前端 ViewUI

原文链接：https://my.oschina.net/u/3223370/blog/3005420

本文介绍两种实现手机应用状态栏沉浸式的方法：一是通过全局设置，修改manifest.json文件；二是使用H5+，在单个页面中动态设置状态栏背景色和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

1.方式一:通过全局设置状态栏为沉浸式

代码如下:在manifest.json文件下添加如下代码:

"plus": {
    	"statusbar": {
	        "immersed": true
	    },

immersed为true表示开启状态栏为沉浸式

说明:所谓沉浸式就是通知栏会根据手机内容适应性变色.这种方式适用于全局页面

2.方式二:通过H5+来实现

代码如下:

<script>
	mui.init();
	
	mui.plusReady(function() {
		//设置状态栏的背景颜色
		plus.navigator.setStatusBarBackground('#262630');
		
		//设置系统状态栏样式 (可选值:dark,light,UIStatusBarStyleDefault,UIStatusBarStyleBlackOpaque)
		plus.navigator.setStatusBarStyle('dark');
	});
</script>

说明:plus.navigator的方式修改是针对单个页面

转载于:https://my.oschina.net/u/3223370/blog/3005420