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

js部分

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

        })

    }

})

wxml部分

   

   

       

           

           

       

       

       

            标题标题

       

   

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; */

}