MUI——設定沉浸式狀態列

教父君發表於2018-11-08
UI

沉浸式狀態列型別就是這樣的

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');
複製程式碼


相關文章