參考網(wǎng)址：https://blog.csdn.net/little_shallot/article/details/110205652

json文件里面加入"navigationStyle":"custom"即可去掉原生導(dǎo)航欄

既可在app.json中去掉，也可以在頁面中json去掉

獲取導(dǎo)航欄高度

用固定高度加定位，發(fā)現(xiàn)在不用設(shè)備下尺寸不對，就比如iPhone X那個劉海屏

圖片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)信息

動態(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
    })
  },