微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题

1. 导航栏计算：

导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度）*2

navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;

2. 获取胶囊信息

let menuButtonObject = wx.getMenuButtonBoundingClientRect();

3.底部小黑条高度：使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断

需要适配的机型，使用safeArea中的bottom，得到安全区域底部纵坐标，然后使用screenHeight减去bottom就能得到小黑条的高度

//获取小黑条高度
this.globalData.botomLHeight = res.screenHeight-res.safeArea.bottom; 

//获取数据

bottomLHeight: app.globalData.botomLHeight,//底部黑条距离

//结构  页面底部加
<view class="blacklHeight" style="height: {{bottomLHeight}}px;"></view>

4.具体代码

wx.getSystemInfo({
      success: res => {
        this.globalData.height = res.statusBarHeight;
        // 状态栏高度
        let statusBarHeight = res.statusBarHeight;         
       // 获取胶囊信息
       let menuButtonObject = wx.getMenuButtonBoundingClientRect();
       //console.log(menuButtonObject)
       let navTop = menuButtonObject.top,//胶囊距离顶部距离
       navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width, // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
       navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
         this.globalData.navHeight = navHeight; //导航栏总体高度
         this.globalData.navTop = navTop; //胶囊距离顶部距离
         this.globalData.navObj = menuButtonObject.height; //胶囊高度
         this.globalData.navObjWid = navObjWid; //胶囊宽度(包括右边距离)
        
        // 底部小黑条高度
        this.globalData.botomLHeight = res.screenHeight-res.safeArea.bottom; 

      }
    })

拿到数据

navHeight: app.globalData.navHeight, //导航栏高度
navTop: app.globalData.navTop, //导航栏距顶部距离
navObj: app.globalData.navObj, //胶囊的高度
navObjWid: app.globalData.navObjWid, //胶囊宽度+距右距离

结构布局

<view  class='nav-wrap' style='height: {{navHeight}}px;' >
  <view class='nav-title' style='height:{{navObj}}px;margin-top:{{navTop}}px;line-height:{{navObj}}px;'>{{navbarData.title}}</view>
  <view style='display: flex; justify-content: space-around;flex-direction: column'>
    <!-- // 导航栏  左上角的返回按钮 和home按钮 -->
    <view class='nav-capsule' style='height: {{navObj}}px;margin-top:{{navTop}}px;'>
      <!-- //从分享进入小程序时 返回上一级按钮不应该存在 -->
      <view bindtap='_navback' wx:if='{{!share}}'>
        <van-icon name="arrow-left" />
      </view>
    </view>  
  </view>
</view>

 样式代码 

/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {
  position: fixed;
  width: 100%;
  top: 0;
  background: #fff;
  color: #000;
  z-index: 9999999;
}
/* 标题要居中 */
.nav-title {
  position: absolute;
  text-align: center;
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  color: #000;
  font-size: 30rpx;
  font-weight: 500;
}

.nav-capsule {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  width: 140rpx;
  justify-content: space-between;
  height: 100%;
}

.navbar-v-line {
  width: 1px;
  height: 32rpx;
  background-color: #e5e5e5;
}

.back-pre, .back-home {
  width: 50rpx;
   height: 50rpx;
  margin-top: 4rpx;
  padding: 10rpx;
}
.nav-capsule .back-home {
  width: 36rpx;
  height: 40rpx;
  margin-top: 3rpx;
}
.userinfo-avatar {
  overflow: hidden;
  width: 58rpx;
  height: 58rpx;
  margin: 2rpx;
  border-radius: 50%;
}

注：如果使用后页面出现滚动轴可加如下代码：

wxml最外层：

<view class="SetTopNavContainer" style="max-height:100vh;overflow-y: auto;"></view>