微信小程序自定义顶部navbar内容，包含获取微信小程序设备状态栏和导航栏高度

一、效果

二、代码

包含获取设备导航栏高度+状态栏高度

<view>
  <view class="containerBox" style="height: {{zHeight}}px;">
    <view class="fieldBox" style="height: {{zHeight}}px;">
      <view class="titleMain" style="top: {{ztlHeight}}px;height: {{dhlHeight}}px;">
        <!-- 自定义navbar的内容 -->
        <view>《</view>
        <view>标题</view>
        <view>》</view>
        <!-- 自定义navbar的内容 end -->
      </view>
    </view>
  </view>
</view>


<!-- 说明 -->
<!-- 第一层盒子 是一个容器 containerBox 高度是 状态栏 + 导航栏-->
<!-- 第二层盒子 fieldBox 也是一个容器 获取到页面 状态栏 + 导航栏 总高度 -->
第二个盒子必写，
<!-- 第三个盒子 titleMain 采用定位的方式，定位在盒子内  -->

总体是需要三个盒子，
方案一：
      第一个盒子是容器，
      第二个盒子是容器，因为是自定义的盒子，第二个盒子加一个背景色，不然会造成页面内容有透视效果
      第三个盒子是自定义的导航栏盒子容器，距离顶部是要有一个距离的，距离就是状态栏高度
方案二：
      一个容器盒子
      容器盒子内包含两个盒子，
      一个上部盒子是状态栏高度盒子，（必须写，一样的不写会有页面内容上划透视效果）
      一个底部自定义导航栏高度盒子，

// 获取 状态栏，导航栏高度
attached() {
    wx.getSystemInfo({
      success: (result) => {
        this.setData({
          ztlHeight:result.statusBarHeight
        })
        console.log(result.statusBarHeight);
      },
    })
    const res = wx.getMenuButtonBoundingClientRect()
    this.setData({
      dhlHeight: (res.top - this.data.ztlHeight) * 2 + res.height
    })
    console.log(res);
    this.setData({
      zHeight: this.data.dhlHeight + this.data.ztlHeight
    })
  },

  /**
   * 组件的初始数据
   */
  data: {
    ztlHeight:0,
    dhlHeight:0,
    zHeight:0
  },

.containerBox .fieldBox{
  background-color: rgb(173, 80, 80);
  width: 100%;
}
.fieldBox {
  position: fixed;
  top: 0;
  width: 100%;
}
.containerBox {
  position: relative;
}
.titleMain {
  width: 100%;
  display: flex;
  align-items: center;
  position: fixed;
  background-color: rgb(173, 80, 80);
}