1.在對應界面的json文件，將navigationStyle屬性設置為“custom”

"navigationStyle":"custom"

2. 狀態欄的高度可以通過?wx.getSystemInfo()?獲取。

膠囊按鈕的信息可以通過?wx.getMenuButtonBoundingClientRect()?獲取。

導航欄高度=狀態欄高度+膠囊按鈕的高度+（膠囊按鈕距離頂部的距離-狀態欄的高度）*2。

由于膠囊按鈕是原生組件，為表現一致，其單位在各個系統都為 px，所以自定義導航欄高度的單位都必須是 px，才能完美適配。

wxml

<view class="header-box"><view style="height:{{capsuleHeight}}px;top:{{capsuleTop}}px" class='back'><van-icon name="arrow-left" color="#333" bindtap='navBack' size="50rpx" /></view><view class="nav-title" style="height:{{capsuleHeight}}px;top:{{capsuleTop}}px">物聯網數據</view><image src="/static/images/news.png" mode="scaleToFill"></image>
</view>

wxss:

.header-box{width: 100%;position:relative;
}
.header-box image {width: 100%;
}
.other-box{position: absolute;top: 370rpx;
}
.back{position: absolute;left: 40rpx;display: flex;align-items: center;justify-content: center;
}
.nav-title{position: absolute;left: 50%;transform: translateX(-50%);font-size: 32rpx;font-weight: bold;display: flex;align-items: center;justify-content: center;
}

js

onLoad(){wx.getSystemInfo({success: res => {this.setData({statusBarHeight:res.statusBarHeight // 獲取狀態欄的高度})}})// 獲取膠囊信息this.data.capsule = wx.getMenuButtonBoundingClientRect()  // 獲取膠囊按鈕的信息this.setData({capsuleTop:this.data.capsule.top, //  膠囊距離屏幕頂部的距離capsuleHeight:this.data.capsule.height, // 膠囊高度})this.setData({// 導航欄高度=狀態欄高度+膠囊按鈕的高度+（膠囊按鈕距離頂部的距離-狀態欄的高度）*2navbarHeight:(this.data.capsule.top-this.data.statusBarHeight)*2+this.data.capsule.height+this.data.statusBarHeight // 導航欄高度})
}

該頁面自定義頭部，也支持分享好友，導致分享出去點左上角的返回沒有反應

// 自定義導航返回按鈕
navBack(){  let pages = getCurrentPages(); //獲取所有頁面if (pages.length <= 1){// 返回首頁wx.switchTab({url: '/pages/index/index',});} else {// 返回上一頁wx.navigateBack({delta: 1,});}      }