微信小程序自定义导航栏

参考网址：https://blog.csdn.net/little_shallot/article/details/110205652

json文件里面加入"navigationStyle":"custom"即可去掉原生导航栏

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

获取导航栏高度

用固定高度加定位，发现在不用设备下尺寸不对，就比如iPhone X那个刘海屏

图片1.png 图片2.png

Object wx.getMenuButtonBoundingClientRect()

获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

bottom: 56 屏幕顶部到按钮底部之间的距离
height: 32 按钮高度
left: 226 屏幕左边到按钮左侧之间的距离
right: 313 屏幕左边到按钮右侧之间的距离
top: 24 屏幕顶部到按钮顶部之间的距离
width: 87 按钮宽度

总高度（红+蓝） = 状态栏高度（红）+(胶囊按钮top值 - 状态栏高度)*2 +胶囊按钮高度

导航栏高度（蓝） = 总高度 - 状态栏高度

图片3.png 图片4.png 图片5.png

获取系统信息

动态获取状态栏高度

wx.getSystemInfo({
  success (res) {
    console.log(res.statusBarHeight）
   }
})

获取导航栏高度

let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: res => {
        let statusBarHeight = res.statusBarHeight;
        // 导航栏高度
        let navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
      },
      fail(err) {
        console.log(err);
      }
    })

在index中自定义导航栏

********* 单位一定用px, 而不能用rpx
模板

<view class="container">
        <view class="nav" style="height:{{height}}px">导航栏文本</view>
</view>

js

data: {
    height: '',
  },
  onLoad() {
    this.setData({
      height: app.globalData.height
    })
  },