MUI-解决iOS原生侧滑返回时状态栏出现白色条的问题(设置沉浸
2018-11-16 本文已影响0人
w_wh
上篇文章实现了iOS原生侧滑返回功能后,会有一个问题:侧滑的时候,状态栏的颜色不会渐变,顶部出现一个白色的条非常不美观,如下图所示:
原创文章,欢迎转载.转载请注明出处: https://www.jianshu.com/p/90f910db9545
分析原因:
由于我们项目的导航栏统一都是纯白色的,不侧滑的时候感觉挺完美。尝试设置为其他颜色就会发现问题,如下图:
状态栏颜色默认是纯白色的,即使使用下面的代码:
mui.plusReady(function() {
plus.navigator.setStatusBarStyle("light");//设置状态栏字体为白色
plus.navigator.setStatusBarBackground("#ea6f5a");//设置状态栏背景颜色和导航栏背景色一致
});
将态栏的颜色设置为和导航栏的一样,侧滑的时候也会出现和导航栏颜色一样的条:
总结:MUI默认将状态栏和导航栏分离,侧滑时只渐变导航栏,而此时的状态栏并不属于导航栏,就出现了上面的问题。解决的办法就是将状态栏和导航栏融为一体,即设置沉浸式状态栏。
设置沉浸式状态栏
参考manifest配置指南:双击项目中的manifest.json文件找到"plus"为其添加如下内容:
"statusbar": {
"immersed": "supportedDevice",//沉浸式状态栏情况(none-非沉浸式, supportedDevice-在支持沉浸式的设备上设置为沉浸式,suggestedDevice-在建议的设备上设置为沉浸式)
"style": "light" //设置状态栏字体颜色(light-白色,dark-黑色)
}
设置为之后的效果如下:
注意:
上面的效果是使用iOS原生导航栏下的效果,如果使用MUI的导航栏会出现高度只有44的问题,安卓和iOS都会有这个问题,正常导航栏的高度是64,除了iPhone X系列手机为88之外(这里所说的导航栏包括状态栏和标题栏)。解决这个问题可以参考我的下一篇文章:MUI-设置沉浸式状态栏后MUI导航栏的高度问题