苹果状态栏问题

小明明

Wex5对于苹果状态栏重合的处理不行。
起因：苹果APP的顶部不会像安卓一样，预留出状态栏的位置。
官方本来提供了支持：
自动检测苹果系统，给panel-top预留位置，但这个处理不合适：
1.IOS10对于Wex5官方的支持不适用了，就导致状态栏重合了。
2.后来官方提供了一个JS，可以支持浏览器判断，但是却会导致showpage出来的页面都自动预留空白，而且top和content重合。
http://bbs.wex5.com/forum.php?mo ... ypeid%26typeid%3D43
3.所以，建议摈弃Wex5的判断，自己判断预留得了。

代码如下：
放在Index页面的onLoad事件里面，自己定义控制就行了。

var ua = navigator.userAgent.toLowerCase();       
                if (/iphone|ipad|ipod/.test(ua)) {
                          $(".appleTop").css({"top":"20px"});       
                } else if (/android/.test(ua)) {
                        //  $(".appleTop").css({"top":"20px"});
                }else{
                       
                }

小明明

额。。。appletop是我自己定义的Class。。。。

其实我已经说到这个份上了，就差把代码要过来改了。

如上：这是index页面，整个APP所有页面其实都是在mainContainer中，我把pages上面预留20px，App的其他部分就会挤压到下面，这20px就是给状态栏用的。
然后因为页面背景色是白的，而状态栏图标等也是白的，这里就加了个div 20px高，背景色黑色，充当状态栏的背景。

问题就这样解决了：
本质状态栏还是和APP重合，只是我们在APP里预留20px位置给状态栏，防止影响到其他按钮和文字。

2017-09-08----------------------------------------------------
补充：在实际使用的过程中又碰到几个问题：
1.顶部预留的白色有时会和状态栏颜色重叠。
解决方法： 我采取的方法是，选了一个折中色，因为苹果状态栏不是黑色就是白色，我选了棕灰色，就会两者都显示。
正规解决方法：其实苹果会自动检测APP顶部颜色，状态栏进行自适应，所以最好的做法是：当时苹果系统时，让所有的页面的panel的top块预留20px距离

2.使用Bootstrap的dialog时，因为dialog是绝对定位，与顶部隔开一段距离，所以现象就是dialog和状态栏重合了。
解决方法：我们在苹果系统的判断代码里给modal （bootstrap Class）定位margin-top:20px即可

3.Wex5自带的Dialog跳转模式  this.comp("windowDialog2").open(); 也是与bootstrap  dialog一样的问题，
解决方法：同上

2017-09-11--------------------------------------------------
基于Wex5官方给出的控制状态栏颜色的cordova，就可以不使用中间色，也不需要控制所有的panel-top了。
只要在index页中预留top 20px，然后选择需要的状态栏颜色即可。
http://docs.wex5.com/cordova-plugin-statusbar/

欢迎补充

12356

.appleTop 这个是panel的样式？

zangwill

楼主，我现在遇到了一样的问题，请问你这个的“.aooleTop”是那个组件的class

lxcmyf

是啊！.appleTop是什么啊？

zangwill

小明明 发表于 2017-5-9 14:40
额。。。appletop是我自己定义的Class。。。。

其实我已经说到这个份上了，就差把代码要过来改了。

多谢楼主的分享，我项目里的页面很多都是凑起来的，我的主页面是白色，现在IOS系统默认的状态栏字体也是白色，所以在主页面看不到状态栏，有没有方法可以改变字体的颜色，UI设计有背景色的字体为白色，没背景色的字体为黑色，能不能给个思路。多谢

小明明

zangwill 发表于 2017-5-13 02:50
多谢楼主的分享，我项目里的页面很多都是凑起来的，我的主页面是白色，现在IOS系统默认的状态栏字体也是 ...

改变苹果状态栏的字体颜色是不现实了，先不说有没有Cordova，很可能苹果也不允许APP做这个操作。
就用我上面的方法就可以，上面留20px黑色背景div，整体看起来和安卓效果一样，不影响。
如果觉得不符合UI的设计，那就让UI改吧。。。。。希望不要被砍死。。

zangwill

小明明 发表于 2017-5-15 09:22
改变苹果状态栏的字体颜色是不现实了，先不说有没有Cordova，很可能苹果也不允许APP做这个操作。
就用我 ...

UI照着原生的来，原生能做出来的wex5必须也要做出来，头疼啊

小明明

zangwill 发表于 2017-5-15 10:44
UI照着原生的来，原生能做出来的wex5必须也要做出来，头疼啊

http://docs.wex5.com/cordova-plugin-statusbar/  看看这个

carbinechun

我一直在用的是在页面的标题栏的组件上加个x-titleBar的class，目前看还没其他问题啊