手机状态栏展示方式有两种,今天就记录下两种状态栏设置方式
1沉浸式
在config.xml中写入下面代码,安卓和ios就可以实现沉浸式了。
<preference name="statusBarAppearance" value="true" />
注意:需要编译成自定义loader或者编译成测试版才有效果。有时候代码没有问题,编译成功了却没有效果,你可以随意添加一个模块后重新编译
设置为沉浸式后你会发现布局被状态栏遮挡住了,官方也提供了相应的解决方法。在每个html页面设置
api.fixStatusBar($api.dom("header")); //padding-top: 20px; 沉浸式状态栏
如果你只想设置ios应用为沉浸式,可以通过下面的方式进行设置。只有iOS7以上有效果。如果设置了statusBarAppearance,则下面代码无效
<preference name="iOS7StatusBarAppearance" value="true" />
$api.fixIos7Bar($api.dom("header")); //padding-top: 20px; 沉浸式状态栏
2 普通模式
如果你不想让状态栏有半透明的沉浸式效果,那我这里还有更粗暴的方式