微信小程序自定义头部自适应手机屏幕的简单方法

我的需求效果如下

我的思路是：

1.整个导航栏拆开分为两部分 一部分是时间、信号灯状态栏部分 第二部分就是除状态栏的下面部分
2.求出导航栏整体高度
3. 然后时间、电量等状态栏的高度 再一减 就得出下面高度

代码部分

//app.js
App({
  globalData: {
     //全局数据管理
     navBarHeight: 0, // 导航栏整体高度
     ztlHeight:0,//顶部时间状态栏的高度
     customTitleHeight:0//自定义导航栏的高度
  },
    calcNavBarInfo(){
          // 获取系统信息
          const systemInfo = wx.getSystemInfoSync();
          //获取最上面的时间状态栏的高度
          const ztLanHeight=wx.getSystemInfoSync().statusBarHeight;
          this.globalData.ztlHeight=ztLanHeight
          //导航栏高度 = 状态栏到胶囊的间距（胶囊上坐标位置-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
          //（胶囊上坐标位置-状态栏高度） * 2这里是胶囊上下其实是有一定的间距的 可以理解为是胶囊距离上面的状态栏的margin值和下面也有空白的margin值 不理解可以看下图 蓝色框起来的部分
          this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
          //然后我用总体高度减去上面时间、信号状态栏的高度就是下面的高度
          this.globalData.customTitleHeight=this.globalData.navBarHeight - ztLanHeight
        
        },
     onLaunch() {
    this.calcNavBarInfo()
  },

})

接下来是购物车页面里的代码部分

//car.wxml
	<view class="custom_heaight" style="height:{{navBarHeight}}px; ">
		<view class="car-head" style="height:{{titleHeight}}px; min-height:{{titleHeight}}px; line-height:{{titleHeight}}px;padding-top:{{ztlHig}}px">
			<view class="come-back">
				<text class="back-text {{menu==1?'show3':'hide3'}}" bindtap="menuCl">编辑</text>
				<text class="over-text {{menu==2?'show3':'hide3'}}" bindtap="menuCl">退出编辑</text>
			</view>
			购物车
		</view>
	</view>

//car.css
.custom_heaight{
  position: fixed;
  background-color: #ffffff;
  top:0;
  left: 0;
  width: 100%;
  z-index: 99;
   box-shadow: 0 0 0.1rem 0.01rem rgba(46,80,254,0.09);
}

car.js部分

    data:{
      navBarHeight: getApp().globalData.navBarHeight,
      titleHeight: getApp().globalData.customTitleHeight,
      ztlHig:getApp().globalData.ztlHeight
    },

---

到此为止，以上是实现的全部代码，我用华为，小米，苹果等手机测试。没有发现什么问题
但是我看其他博主写的就很复杂要计算出胶囊的高度 还有胶囊的margin值 等 我这样写目前是适配了，不知道会不会有什么问题，如有问题还请指正。

~~完结 撒花