1. 程式人生 > >MUI——設定沉浸式狀態列

MUI——設定沉浸式狀態列

首先我們要明白,狀態列變色、狀態列沉浸式、全屏的區別

手機的頂部狀態列,也就是訊號、電量那條,有4種狀態,分別是正常、變色、透明(也稱沉浸式狀態列)、消失(也就是全屏)。
後3種特殊用法,具體見下:

狀態列變色

常見使用場景:如果title背景為純色且顯眼,一般會把狀態列的背景色也變成title的顏色,看起來大氣,比如流應用中的網易新聞。

寫法:
使用5+API plus.navigator.setStatusBarBackground)。

首頁配置
首頁需要在manifest.json檔案中,plus->launchwebview下新增statusbar節點,並配置background的值(格式為#RRGGBB)。

若首頁為secondwebview,則調整launchwebview為secondwebview即可。

終端支援:
- Android5及以上系統支援;
- iOS7.0及以上系統支援。

前景色處理:
當背景色調整後,如果調整不當,會造成前景的訊號欄文字顏色與背景太相近,看不清前景,此時需要調整前景色。
前景色的使用限制更多些,只能設定黑或白,通過plus.navigator.setStatusBarStyle('dark');設前景為黑色,'dark'換成light則前景色變為白色。
同時前景色處理在終端支援方面:
- Android5只有小米和魅族支援,Android6及以上所有安卓支援;
- iOS7及以上支援

高度處理:此時webview高度沒有全屏,webview高度+狀態列高度=手機螢幕高度。
也就是轉場動畫時,webview動畫是不會通頂的,狀態列不會在轉場時變化。

狀態列透明(沉浸式)

常見使用場景:如果頁面頂部是圖片,一般會把狀態列變成透明,此時同時會處理成滾動後恢復為純色title,比如流應用中的36kr:


或者看視訊https://v.qq.com/x/page/h0386sphgpt.html

寫法:

HBuilder建立的應用預設不使用沉浸式狀態列樣式,需要進行如下配置開啟:
開啟應用的manifest.json檔案,切換到程式碼檢視,在plus -> statusbar 下新增immersed節點並設定值為true。

"plus":{"statusbar":{"immersed":true}}

如下圖所示:

儲存後提交App雲端打包

如果不生效,在distribute節點下的apple和goole兩個節點下新增:

"UIReserveStatusbarOffset": true,(apple節點下新增)

"ImmersedStatusbar": true,/*設定為沉浸欄模式*/(goole節點下新增)


終端支援:
- Android4.4及以上系統支援;
- iOS7.0及以上系統支援。
前景色處理:
與背景色調整相同,如果背景圖顏色不當,會造成前景的訊號欄文字顏色與背景太相近,看不清前景,此時需要調整前景色。
前景色的使用限制更多些,只能設定黑或白,通過plus.navigator.setStatusBarStyle('dark');設前景為黑色,'dark'換成light則前景色變為白色。
同時前景色處理在終端支援方面:
- Android5只有小米和魅族支援,Android6及以上所有安卓支援;
- iOS7及以上支援

高度處理:
注意,此時webview高度為全屏,狀態列高度為0,也就是webview高度=螢幕高度。
狀態列背景透明後前景圖示覆蓋在webview頂部。
尤其注意此時dom裡涉及fix定位計算的元素,可能需要重新排高度。
在狀態列透明的情況下,轉場動畫時,webview動畫是會通頂的,狀態列那裡也會有條線左右移動。

其他注意:
沉浸式狀態列不支援動態調整,屬於應用級,真機執行不生效,需要提交到雲端打包後有效。
一個app設定了沉浸式,就意味著裡面的每個webview都變成沉浸式。
這可能會造成很多頁面都需要調整高度,此時有一種方案,就是在webview建立時,允許通過一個引數設定把這個webview的狀態條再模擬顯示出來,plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {statusbar:{background:"#D4D4D4"}})。這樣設定後,webview的高度重新回到狀態列下方,不再頂到螢幕頂部。
此api從HBuilder8.1 alpha版起生效。

全屏顯示 (沒有狀態列)

常見使用場景:如果頁面是全屏遊戲,一般會直接讓狀態列消失,也就是頁面全屏。webview高度全屏了,狀態列沒有了。
寫法:
設定應用全屏顯示
終端支援:
沒有終端型別限制
高度處理:與狀態列透明相同,webview高度=螢幕高度,狀態列高度為0且不顯示前景內容。需要注意dom裡fix元素的調整。