一、 前言 狀態欄就是手機屏幕最頂部的區域，包括了：信號、運營商、電量等信息。通常APP都有屬於自己的色調風格，為了達到整體視覺美觀，通常會設置狀態欄和標題欄的色調設置成一致。 圖例： 二、狀態欄狀態類型 三、狀態欄變色 1.效果如圖： 2.根據色調設置狀態欄文字顏色，文字顏色只提供兩種值：ligh ...
一、 前言
狀態欄就是手機屏幕最頂部的區域，包括了：信號、運營商、電量等信息。通常APP都有屬於自己的色調風格，為了達到整體視覺美觀，通常會設置狀態欄和標題欄的色調設置成一致。
圖例：
二、狀態欄狀態類型
- 預設
- 變色（設置顏色）
- 透明（沉浸式）
- 消失（全屏）
三、狀態欄變色
1.效果如圖：
2.根據色調設置狀態欄文字顏色，文字顏色只提供兩種值：light（白色）、dark（黑色）
3.設置標題欄背景顏色
4.設置狀態欄背景顏色，顏色值為16進位
示例代碼：
1 <link href="css/mui.min.css" rel="stylesheet"/> 2 .mui-bar{ background-color: red;} 3 </link> 4 <script> 5 mui.plusReady(function(){ 6 plus.navigator.setStatusBarStyle('light'); 7 plus.navigator.setStatusBarBackground('#FF0000'); 8 }); 9 </script>View Code
註意事項：
背景色終端支持僅：Android5及以上系統支持；iOS7.0及以上系統支持。
文字色終端支持僅：Android5只有小米和魅族支持，Android6及以上所有安卓支持；iOS7及以上支持。
四、狀態欄透明（沉浸式）
1.效果如圖：
（將背景圖片和狀態欄、標題欄貫通了）
2.運用實戰（登錄界面）
需求描述：將背景設置成圖片，圖片可以適應不同設備的分配率（響應式），將狀態欄的背景設置成透明，背景圖片覆蓋狀態欄至屏幕頂部。
<style> html,body{height: 100%;width: 100%;} body{ background:url(image/background.png)no-repeat; background-size:100% 100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/background.png',sizingMethod='scale'); } </style>設置頁面背景
mui.plusReady(function(){
plus.navigator.setStatusBarStyle('light');
});
針對背景色的色調設置狀態欄文字的顏色
"plus": {
"statusbar": {
"immersed": true
}
}
打開應用的manifest.json文件，切換到代碼視圖，在plus -> statusbar 下添加immersed節點並設置值為true
3.沉浸式延伸的問題
由於沉浸式模式是在manifest.json文件配置，作為了一個固定全局的設置，沉浸式的設置可能只是針對部分頁面，那麼對其他的頁面都牽連了。
導致的效果如圖：
（狀態欄的高度被忽略）
解決代碼：
mui.plusReady(function(){
plus.webview.currentWebview().setStyle({
statusbar:{background:'#ff0000'},top:0,bottom: 0
});
});
background屬性，設置狀態欄的背景色。
五、 全屏顯示（沒有狀態欄）
在應用中可調用5+ API動態改變應用是否全屏顯示的狀態：
function fullscreen(){
// 設置應用全屏顯示！
plus.navigator.setFullscreen(true);
}
function unfullscreen(){
// 設置應用非全屏顯示！
plus.navigator.setFullscreen(false);
}
function isfullscreen(){
// 查詢應用當前是否全屏顯示！
console.log( "是否全屏："+(plus.navigator.isFullscreen()?"是":"否") );
}
