微信小程序自定义头部导航栏（适应机型）

自定义的头部导航栏的高度，因为机型的原因，很难确定！但是可以通过计算得出来导航栏的高度！（全局 定义、或者 单页面 自定义都可以的）,下边我说的单页面自定义。

---

自己创建一个导航栏组件，比如命名navigationBar

在你需要自定义的页面的json文件,进行配置和引入组件

{
  "usingComponents": {
    "navigationBar": "../../components/navigationBar/navigationBar"
  },
  "navigationStyle": "custom"
}

---

在全局的app.js文件中

App({
	onLaunch(){
		this.topBarHeight();
	},
	globalData:{
		navigationBarHeight:0,//这个值整个导航栏的高度
		statusBarHeight：wx.getSystemInfoSync()['statusBarHeight'], //状态栏的高度
	}
	topBarHeight(){
	    var {top,height} = wx.getMenuButtonBoundingClientRect(); //胶囊按钮的位置
    	var statusH = wx.getSystemInfoSync()['statusBarHeight']; //状态栏的位置
    	var meneStatusHeight = top - statusH; //状态栏到胶囊按钮的距离
    	var navigationBarHeight = statusH + height + meneStatusHeight * 2; //整个头部导航栏：状态栏+状态栏距离胶囊按钮的距离*2+胶囊按钮的高度
    	this.globalData.navigationBarHeight = navigationBarHeight;
    	//this.globalData.navigationBarHeight = navigationBarHeight*2;  如果在行内使用rpx样式，则需要*2，如果是用的px则不需要
	}
})

---

---

然后在创建的navigationBar中

在navigationBar.js中

const app = getApp();
const statusBarHeight = app.globalData.statusBarHeight;
const navigationBarHeight = (app.globalData.navigationBarHeight);
const containerHeight = navigationBarHeight - statusBarHeight;//这个是内容高度
Component({
	properties:{},
	 data: {
    	statusBarHeight: statusBarHeight + 'px',
    	navigationBarHeight: navigationBarHeight + 'px',
    	containerHeight: containerHeight + 'px',
  },
})

---

在navigation.wxml中

<view class="bar-box" style="{{'height:'+navigationBarHeight}}">
  <view class="status-height" style="{{'height:'+statusBarHeight}}"></view>
  <view>要加的内容</view>
</view>
<!--【这个很有用】，因为上边整个导航栏的盒子要fixed定位，所以导航栏部分不占位置，特意加一个空白盒子高度等于导航栏的填充-->
<view class="box1" style="{{'height:'+navigationBarHeight}}"></view>

---

在navigation.wxss中

.bar-box{
	 width: 100%;
  	 position: fixed;
  	 top: 0;
  	 left: 0;
  	 z-index: 100;
}