mui 沉浸式

 

 

使用沉浸式和非沉浸式對比.

首先在manifest.json 代碼視圖中 plus中添加這麼一條屬性,表明開啓沉浸式

 

而後在mui.mini.js的最後添加 h爲hui的選擇器,要導入h.js,或者能夠本身另寫也能夠.

mui.plusReady(function(){
var isImmersedStatusbar=plus.navigator.isImmersedStatusbar(); //判斷是否支持沉浸式
var StatusbarHeight=plus.navigator.getStatusbarHeight(); //獲取狀態欄高度
var heightH=h('.mui-bar-nav').eq(0).height() //獲取導航欄高度

h('.mui-bar-nav').eq(0).css({height:(heightH+StatusbarHeight)+'px','paddingTop':StatusbarHeight+'px'})
//設置導航欄高度爲原高度+狀態欄高度+設置內邊距高度爲狀態欄高度

h('.mui-content').eq(0).css({'paddingTop':(44+StatusbarHeight)+'px'});
//設置content 樣式內上邊距增長狀態欄高度
})

 

原生js的寫法

mui.plusReady(function() {
var isImmersedStatusbar = plus.navigator.isImmersedStatusbar();
//判斷是否支持沉浸式
var StatusbarHeight = plus.navigator.getStatusbarHeight();
//獲取狀態欄高度
var heightH = document.getElementsByClassName('mui-bar-nav')[0].offsetHeight;
//獲取元素計算後的高度
document.getElementsByClassName('mui-bar-nav')[0].style.height=heightH+StatusbarHeight+'px';
document.getElementsByClassName('mui-bar-nav')[0].style.paddingTop=StatusbarHeight+'px';
//設置導航欄高度爲原高度+狀態欄高度+設置內邊距高度爲狀態欄高度
document.getElementsByClassName('mui-content')[0].style.paddingTop = heightH + StatusbarHeight + 'px';
//設置content 樣式內上邊距增長狀態欄高度 })