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

js部分

var page_this = this;

wx.getSystemInfo({

    success: (res) => {

        page_this.setData({

            windowHeight: res.windowHeight,

            windowWidth: res.windowWidth,

            windowIsBang: (res.windowWidth / res.windowHeight < 0.5 ? true : false) //判断是否刘海

        })

    }

})

wxml部分

<!--头部内容填充-->

<view class="h-false" style="height:calc({{windowIsBang ? 40 : 16}}px + 52px);"></view>

<!-- 人造头部  -->

<view class="h">

    <view class="h-t" style="padding-top:{{windowIsBang ? 40 : 16}}px;">

    <!--返回按钮-->

        <navigator class="h-t-left" open-type="reLaunch" url="../index/index" style="top:calc({{windowIsBang ? 40 : 16}}px + 15px);">

            <text class="iconfont icon-back"></text>

            <text class="clearfix"></text>

        </navigator>

        <!--居中标题-->

        <view class="h-t-title">

            <text>标题标题</text>

        </view>

    </view>

</view>

wxss部分

/*头部*/

.h{

  background:#fff;

  color: #000;

  font-size: 32rpx;

  text-align: center;

  font-family: PingFangSC-regular;

  /*position: fixed;*/

  width: 100%;

  top: 0;

  left: 0;

  z-index: 100;

}

.h-t{

  position: relative;

}

.h-t .h-t-left{

  left: 30rpx;

  font-size: 32rpx;

  width: 64rpx;

  height: 64rpx;

  position: absolute;

}

.h-t .icon-back{

  vertical-align: middle;

  font-size: 52rpx;

  color:#C7C7CC;

}

.h-t .h-t-title{

  font-size: 14px;

  /* padding:16px 0; */

  padding:5px 0;

  /* min-height: 16px; */

}