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

一、效果

二、代码

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

  
    
      
        
        《
        标题
        》
        
      
    
  






第二个盒子必写，


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

 

 

// 获取 状态栏，导航栏高度
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);
}

三、没有第二个盒子的效果