參考網(wǎng)址:https://blog.csdn.net/little_shallot/article/details/110205652
json文件里面加入"navigationStyle":"custom"即可去掉原生導(dǎo)航欄
既可在app.json中去掉绘证,也可以在頁(yè)面中json去掉
獲取導(dǎo)航欄高度
用固定高度加定位隧膏,發(fā)現(xiàn)在不用設(shè)備下尺寸不對(duì),就比如iPhone X那個(gè)劉海屏
圖片1.png
圖片2.png
Object wx.getMenuButtonBoundingClientRect()
獲取菜單按鈕(右上角膠囊按鈕)的布局位置信息嚷那。坐標(biāo)信息以屏幕左上角為原點(diǎn)胞枕。
bottom: 56 屏幕頂部到按鈕底部之間的距離
height: 32 按鈕高度
left: 226 屏幕左邊到按鈕左側(cè)之間的距離
right: 313 屏幕左邊到按鈕右側(cè)之間的距離
top: 24 屏幕頂部到按鈕頂部之間的距離
width: 87 按鈕寬度
總高度(紅+藍(lán)) = 狀態(tài)欄高度(紅)+(膠囊按鈕top值 - 狀態(tài)欄高度)*2 +膠囊按鈕高度
導(dǎo)航欄高度(藍(lán)) = 總高度 - 狀態(tài)欄高度
圖片3.png
圖片4.png
圖片5.png
獲取系統(tǒng)信息
動(dòng)態(tài)獲取狀態(tài)欄高度
wx.getSystemInfo({
success (res) {
console.log(res.statusBarHeight)
}
})
獲取導(dǎo)航欄高度
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => {
let statusBarHeight = res.statusBarHeight;
// 導(dǎo)航欄高度
let navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
},
fail(err) {
console.log(err);
}
})
在index中自定義導(dǎo)航欄
********* 單位一定用px, 而不能用rpx
模板
<view class="container">
<view class="nav" style="height:{{height}}px">導(dǎo)航欄文本</view>
</view>
js
data: {
height: '',
},
onLoad() {
this.setData({
height: app.globalData.height
})
},