uni-app 设置沉浸式的状态栏

政叁扑 · 发表于 2020-12-9 15:57:00

uni-app 想要实现最顶部（手机预览包含电量信号的位置），改成我们自己想要的，可以是透明状态

解决方案：

在pages.json文件中设置

1、全局取消原生导航栏，注释或者删除即可。

2、在每个页面单独配置style，当navigationStyle设为custom或titleNView设为false时，原生导航栏不显示：

{
　　"path": "pages/index/index",
　　"style": {
　　　　"navigationBarTitleText": "首页", // 设置页面默认标题内容
　　　　"navigationBarTextStyle": "white", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
　　　　// #ifdef H5
　　　　"titleNView": false, // 设置默认导航栏隐藏
　　　　// #endif
　　　　"enablePullDownRefresh": false,  // 设置页面不可以下拉刷新
　　　　"app-plus": {  // 设置默认导航栏隐藏
　　　　　　"titleNView": false
　　　　}
　　}
},

有个质疑，在文件manifest.json 中，找到源码视图，这里有个可以设置开启沉浸式，但是我设置下面这个文件代码，不管设置不设置，也可以实现效果，嗯~~~，有待考究

可能在uniapp中，只设置上面代码即可，针对html5页面版的是需要设置的

"app-plus" : {
　　"statusbar" : {
　　　　"immersed" : true, //开启沉浸式
　　　　 "style" : "dark"
　　},
　　 /* 模块配置 */
　　"distribute" : {
　　　　 "ios" : {
　　　　　　"UIReserveStatusbarOffset" : true /*IOS设置为沉浸栏模式*/
	},
　　}
}