微信小程序自定义头部

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="/https/blog.csdn.net/static/images/news.png" mode="scaleToFill"></image>
</view>

wxss:

.header-box{
  width: 100%;
  positi