小程序顶部自定义标题栏高度自适应

因为不同手机状态栏的高度不同，首先需要在一开始的app.js里面获取当前设备的状态栏高以及机型

App({
  onLaunch: function () {
  	this.getVersion()
  },
  globalData: {
    version:'', // 小程序基础库版本号（兼容小程序api用）
    barHeight: 0, // 手机状态栏的高度
    isIos: false, // 是否为ios
  },  
  getVersion() {
	    let _self = this;
	    wx.getSystemInfo({
	      success: function (res) {
	        let version = res.SDKVersion;
	        _self.globalData.statusBarHeight = res.statusBarHeight; // 手机状态栏的高度
	        if(res.platform == "ios" || res.system.indexOf('iOS') > -1 || res.system.indexOf('macOS') > -1){
	          // 是否为ios这里包括ipad和macos
	          _self.globalData.isIos = true;
	        }
	        _self.globalData.version = version.replace(/\./g, "");
	      }
	    })
  }
 ... 

小程序标题栏的高度，一般ios是44px 安卓是46px
wxml

<!-- 页面标题 -->
  <view class="title-pd" style="height: {{isIos ? titlePadTop + 44 : titlePadTop +46}}px">
    <view class="title" style="box-sizing: content-box; padding-top: {{titlePadTop}}px; height: {{isIos ? 44 : 46}}px">
      <view class="iconfont icon-arrow-right mr-2 size-32" bindtap="goBack"></view>
      <view>标题</view>
      <view></view>
    </view>
  </view>

wxss

/* 页面标题 */
.title{
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000000;
  font-size: 26rpx;
  background-color: #ffffff;
}
.title >view {
  min-width: 60rpx;
}
.title .iconfont{
  margin-left: 20rpx;
  font-size: 38rpx;
}

js 在加载的时候去获取全局globalData的值来赋值

data: {
    titlePadTop: 0, // 顶部状态栏的高度
    isIos: false, // 是否为ios
 }