apiCloud 狀態欄的設置

手機狀態欄展示方式有兩種，今天就記錄下兩種狀態欄設置方式

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 全屏式

如果你不想讓狀態欄有半透明的沉浸式效果，那我這裏還有更粗暴的方式，直接設置狀態欄背景顏色，不知道怎麼叫就取名叫全屏式吧。個人認爲全屏式是最好看的，也是最方便的。直接在html頁面設置

api.setStatusBarStyle({
    style: 'dark',        dark        //狀態欄字體爲黑色，適用於淺色背景
                          light       //狀態欄字體爲白色，適用於深色背景
    color:'#ffffff'
});