五叶神
五叶神
  • 发布:2016-11-15 11:29
  • 更新:2016-11-15 11:29
  • 阅读:5930

【经验分享】解决ios页面切换,状态栏背景、文字样式变换不自然问题

分类:MUI

ios的沉浸模式默认是开启的,是由配置文件apple节点下的UIReserveStatusbarOffset属性设置的;
但是偷偷听说是创建了一个webview在状态栏位置,所以切换页面的时候并不会跟着打开的webview一起滑动,只能通过plus.navigator.setStatusBarBackground("#e3393c");或者init方法的statusBarBackground参数去设置背景颜色,切换加载webview后才会去执行修改背景颜色的方法,就会有一定的延迟,切换不和谐。

故尝试了放弃UIReserveStatusbarOffset,设置值为false,果然页面整体顶上去了,那么接下来就简单了,ios的状态栏高度固定为20px,剩下的就跟安卓的沉浸模式差不多的做法了, ios中mui会给body添加固定的class:mui-plus mui-ios mui-ios-8 mui-ios-8-4 mui-statusbar,那么写几个.mui-ios 下的样式(如:.mui-ios header{ padding-top:20px;})就轻松预留了状态栏的高度,这样header是什么背景就是状态栏的背景了。

如果需要不同页面去修改状态栏文字颜色就只能通过:plus.navigator.setStatusBarStyle("UIStatusBarStyleDefault");

以及init方法的beforeback:function(){plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");} 配合变换;

目前这样使用很流畅,基本无延迟,类似原生(ios原生为渐变)

2 关注 分享
smartapple l丶yc

要回复文章请先登录注册

五叶神

五叶神 (作者)

回复 wenju :
厉害了我的哥,已偷走,哈哈
2017-08-11 17:00
wenju

wenju

回复 五叶神 :
分享一下最近更新的js框架 还请五叶神兄多多指点关照 ~ https://github.com/mescroll/mescroll
2017-08-11 16:53
wenju

wenju

回复 五叶神 :
没有 就商品详情页和活动中心界面有轮播图; 多谢大师指点~
2017-08-11 16:48
五叶神

五叶神 (作者)

回复 wenju :
你内页也弄了很多轮播图?swiperight可以在方法内做写判断处理下,event对象里面的参数判断下应该可以防止无意关闭页面,以前写过一个翻书类的就是这么处理的
2017-08-11 16:22
wenju

wenju

回复 五叶神 :
还别说 你这个方案貌似可行; 我测试一下会不会和轮播图冲突 ~
2017-08-11 16:14
wenju

wenju

回复 五叶神 :
哈哈 O(∩_∩)O谢谢夸奖 现在已经不在这公司做了; 新公司是雅布力 ~
2017-08-11 16:13
五叶神

五叶神 (作者)

回复 wenju :
客气,你做的宝贝租车也帮了我不少忙,哈哈
2017-08-11 16:01
五叶神

五叶神 (作者)

回复 wenju :
右滑关闭效果太差,用得少,没注意到这个问题,目前提供的右滑即不灵敏也跟原生的不是一回事,跟swiperight一个效果(可能就是用的同一个方法),如果不触发beforeback,那不如自己写个swiperight,Wv.close()监听关闭
2017-08-11 15:58
wenju

wenju

就是ios右滑关闭界面 不会触发beforeback的方案 好坑
2017-08-11 12:22
wenju

wenju

openWindow可以设置statusbar:{background: barColor}稍微简单些;
不同的界面去修改状态栏颜色确实得参考你的方案 O(∩_∩)O谢谢帮了大忙
2017-08-11 12:22