MUI——設置沉浸式狀態欄

沉浸式狀態欄類型就是這樣的

HBuilder建立的應用默認不使用沉浸式狀態欄樣式，須要進行以下配置開啓：

打開應用的manifest.json文件，切換到代碼視圖，在plus -> statusbar 下添加immersed節點並設置值爲true。

"plus": {
		"statusbar": {/*設置沉浸式狀態欄*/
			"immersed": true
		},
		"splashscreen": {
			"autoclose": true,/*是否自動關閉程序啓動界面，true表示應用加載應用入口頁面後自動關閉；false則需調plus.navigator.closeSplashscreen()關閉*/
			"waiting": false,
			"delay": "1000"
		}複製代碼

若是不生效，在distribute節點下的apple和goole兩個節點下添加：

"UIReserveStatusbarOffset": true,（apple節點下添加）

"ImmersedStatusbar": true,/*設置爲沉浸欄模式*/（goole節點下添加）

"apple": {
	"appid": "",/*iOS應用標識，蘋果開發網站申請的appid，如io.dcloud.HelloH5*/
	"mobileprovision": "",/*iOS應用打包配置文件*/
	"password": "",/*iOS應用打包我的證書導入密碼*/
	"p12": "",/*iOS應用打包我的證書，打包配置文件關聯的我的證書*/
	"devices": "universal",/*iOS應用支持的設備類型，可取值iphone/ipad/universal*/
	"UIReserveStatusbarOffset": false,/*沉浸式狀態欄*/
	},
"google": {
	"packagename": "",/*Android應用包名，如io.dcloud.HelloH5*/
	"keystore": "",/*Android應用打包使用的密鑰庫文件*/
	"password": "",/*Android應用打包使用密鑰庫中證書的密碼*/
	"aliasname": "",/*Android應用打包使用密鑰庫中證書的別名*/
	"ImmersedStatusbar": true,/*設置爲沉浸欄模式*/
        }複製代碼

由於設置了沉浸式狀態欄。因此此時的狀態欄高度爲0，這時候咱們要手動去添加狀態欄的高度，順便說一下，沉浸式是應用級的，全部頁面都會變成沉浸式的，因此最好寫成公用的去調用添加狀態欄高度。

var StatusbarHeight;
// H5 plus事件處理,沉浸式導航
mui.plusReady(function () {
    // 獲取是否爲沉浸式狀態欄模式
    var bi = plus.navigator.isImmersedStatusbar();
//獲取系統狀態欄高度
    if (mui.os.ios) {
        if (screen.height >= 812 && screen.width == 375){
            //是iphoneX
            StatusbarHeight=44;
        }else{
            //不是iphoneX
            StatusbarHeight=20;
        }
    } else {
        //H5+APP原生獲取狀態欄高度，若是打包不引入iOS原生，也能夠只調用下面這句無需判斷。
        StatusbarHeight = plus.navigator.getStatusbarHeight();
    }
    var transparentH=$(".p_nav").eq(0).height();//導航欄高度
    var headerH = $('.p_wrapper').eq(0).height();//內容區域高度
    if(bi===true){//若是爲沉浸式狀態欄
  
        $(".bar-nav-con").eq(0).css({height: (transparentH + StatusbarHeight)+'px', 'paddingTop':StatusbarHeight+'px'});
        //添加狀態欄的高度
        $('.p_wrapper').eq(0).css({height: (headerH + StatusbarHeight)+'px', 'paddingTop':StatusbarHeight+'px'});
        $('.m_wrapper').eq(0).css({ 'marginTop':StatusbarHeight+'px'});
    }
    //禁止橫屏顯示,僅支持豎屏顯示
    plus.screen.lockOrientation("portrait-primary");
})複製代碼

由於導航欄是position：fixed定位的，因此導航欄跟內容區域都要分別添加狀態欄高度，具體需求根據我的來定。

最後附上更改狀態欄顏色的代碼

//黑底白字，在沉浸式下就是白色字體
void plus.navigator.setStatusBarStyle( 'light' );
//白底黑字，在沉浸式下就是黑色字體
void plus.navigator.setStatusBarStyle( 'dark' );
// 設置系統狀態欄背景爲紅色，沉浸式下不起做用，由於狀態欄高度爲零。
 plus.navigator.setStatusBarBackground('#red');
複製代碼