上篇文章实现了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导航栏的高度问题
网友评论