アプレット上部のカスタム タイトル バーの高さは調整可能です

携帯電話によってステータスバーの高さが異なるため、最初に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 の場合は 44 ピクセル、Android の場合は 46 ピクセルです
。

<!-- 页面标题 -->
  <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
 }