uni-app 设置沉浸式的状态栏
<p><span style="font-size: 18px">uni-app 想要实现最顶部（手机预览包含电量信号的位置）， 改成我们自己想要的，可以是透明状态</span></p><p><img src="https://img2020.cnblogs.com/blog/760940/202012/760940-20201209151528661-224277634.png"></p>
<p><span style="font-size: 18px">解决方案：</span></p>
<p><span style="font-size: 18px">在pages.json文件中设置</span></p>
<p><span style="font-size: 18px">1、全局取消原生导航栏，注释或者删除即可。</span></p>
<p><span style="font-size: 18px">2、在每个页面单独配置style，当navigationStyle设为custom或titleNView设为false时，原生导航栏不显示：</span></p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><span style="font-size: 18px">{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页", // 设置页面默认标题内容</span><br><span style="font-size: 18px"> "navigationBarTextStyle": "white", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white</span><br><span style="font-size: 18px"> // #ifdef H5
"titleNView": false, // 设置默认导航栏隐藏
// #endif
"enablePullDownRefresh": false,// 设置页面不可以下拉刷新
<strong><span style="color: rgba(255, 0, 0, 1)">"app-plus": {// 设置默认导航栏隐藏
"titleNView": false
}</span></strong>
}
},
</span></pre>
</div>
<p><span style="font-size: 18px">有个质疑，在文件manifest.json 中，找到源码视图，这里有个可以设置开启沉浸式，但是我设置下面这个文件代码，不管设置不设置，也可以实现效果，嗯~~~，有待考究</span></p>
<p><span style="font-size: 18px">可能在uniapp中，只设置上面代码即可，针对html5页面版的是需要设置的</span></p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><span style="font-size: 18px">"app-plus" : {
"statusbar" : {
"immersed" : true, //开启沉浸式
"style" : "dark"
},
/* 模块配置 */
"distribute" : {
"ios" : {
"UIReserveStatusbarOffset" : true /*IOS设置为沉浸栏模式*/
},</span><br><span style="font-size: 18px"> }</span><br><span style="font-size: 18px">}</span><br>
</pre>
</div>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
吾日三省吾身，脚踏实地~<br><br>
来源：https://www.cnblogs.com/liangqilin/p/14109131.html
頁:
[1]