MUI-解决iOS原生侧滑返回时状态栏出现白色条的问题(设置沉浸式状态栏)

上篇文章实现了iOS原生侧滑返回功能后,会有一个问题:侧滑的时候,状态栏的颜色不会渐变,顶部出现一个白色的条非常不美观,如下图所示:


2587804-acf33a3373e8a9f8.jpg

分析原因:

由于我们项目的导航栏统一都是纯白色的,不侧滑的时候感觉挺完美。尝试设置为其他颜色就会发现问题,如下图:


2587804-2d0e78145b82cf47.jpg

状态栏颜色默认是纯白色的,即使使用下面的代码:

mui.plusReady(function() {
    plus.navigator.setStatusBarStyle("light");//设置状态栏字体为白色
    plus.navigator.setStatusBarBackground("#ea6f5a");//设置状态栏背景颜色和导航栏背景色一致
});

将态栏的颜色设置为和导航栏的一样,侧滑的时候也会出现和导航栏颜色一样的条:

2587804-3b24e24074f07d45.jpg

总结:MUI默认将状态栏和导航栏分离,侧滑时只渐变导航栏,而此时的状态栏并不属于导航栏,就出现了上面的问题。解决的办法就是将状态栏和导航栏融为一体,即设置 沉浸式状态栏

设置沉浸式状态栏

参考manifest配置指南:双击项目中的manifest.json文件找到"plus"为其添加如下内容:

"statusbar": {
    "immersed": "supportedDevice",//沉浸式状态栏情况(none-非沉浸式, supportedDevice-在支持沉浸式的设备上设置为沉浸式,suggestedDevice-在建议的设备上设置为沉浸式)
    "style": "light"  //设置状态栏字体颜色(light-白色,dark-黑色)
}

设置为之后的效果如下:

2587804-e172a77536553eae.jpg

注意:上面的效果是使用iOS原生导航栏下的效果,如果使用MUI的导航栏会出现高度只有44的问题,安卓和iOS都会有这个问题,正常导航栏的高度是64,除了iPhone X系列手机为88之外(这里所说的导航栏包括状态栏和标题栏)。解决这个问题可以参考我的下一篇文章: MUI-设置沉浸式状态栏后MUI导航栏的高度问题

猜你喜欢

转载自blog.csdn.net/weixin_33722405/article/details/87231626