微信小程序自定义头部tabBar中判断iphoneX刘海头部，并自适应

xml

<!-- 头部内容填充 -->
<!-- 人造头部  -->
<view class="h-false" style="height:{{statusHeight + navHeight}}px;padding-top:{{statusHeight}}px">
  <view class="false-main" style="height:{{navHeight}}px">
    <view class="main-nackTo">
      <van-icon name="arrow-left" size="22px"/>
    </view>
    <text class="h-main-live {{TitleID == 0 ? 'Tlive':''}}" bindtap="onChangeTitleId">直播频道</text>
    <text class="h-main-loge {{TitleID != 0 ? 'Tlive':''}}" bindtap="onChangeTitleId">商品Vlog</text>
  </view>
</view>

js

data: {
    windowHeight:null,
    windowWidth:null,
    statusHeight:null,
    navHeight:null,
    //
    TitleID:0,
  },

  //顶部切换
  onChangeTitleId(){
    var that = this;
    var TitleID = that.data.TitleID
    if(TitleID == 1){
      that.setData({
        TitleID:0
      })
    }else{
      that.setData({
        TitleID:1
      })
    }
  },
onLoad: function (options) {
    var page_this = this;
    var sysinfo = wx.getSystemInfoSync(),
      statusHeight = sysinfo.statusBarHeight,
      isiOS = sysinfo.system.indexOf("iOS") > -1,
      navHeight;
    if (!isiOS) {
      navHeight = 48;
    } else {
      navHeight = 44;
    }
    wx.getSystemInfo({
      success: (res) => {
        page_this.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth,
          statusHeight: statusHeight,
          navHeight: navHeight
        })
        console.log(this.data.statusHeight);
        console.log(this.data.navHeight);
      }
    })
  },

wxss

/* 人造头部 */

.h-false {
  box-sizing: border-box;
}

.h-false .false-main {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-left: 10rpx;
}

.h-false .false-main .main-nackTo {
  float: left;
  margin-right: 176rpx;
}

.h-false .false-main .h-main-live ,
.h-false .false-main .h-main-loge {
  font-size: 16px;
  font-weight: bold;
  color: #999999;
}
.Tlive{
  color: #000000 !important;
}

.h-false .false-main .h-main-loge {
  margin-left: 40rpx;
}

参考：https://www.jianshu.com/p/8e3f2c504feb