如何在uni

拿到导航栏的高度当然是为了自定义导航栏，uniapp默认为我们提供了一个导航栏，也就是每个页面上面的标题，但如果对这个默认的导航栏不满意，我们就可以选择自定义导航栏，比如我在下面，为了满足业务需求，放了一个搜索框，取代了原先的标题栏。

不仅仅是在导航栏放放东西，如果你要导航栏自定义大背景，也需要自定义导航栏，如下(图片来源网络)：

如果我们要开启页面自义定导航栏，以首页index为例，我们要在pages.json中加入以下代码，它默认是default。

我们再来看看几个参数

我们可以把小程序页面分为三块，一个是页面的头部，就是图片所示的部分，还有就是页面的主体，平时我们写代码那块，最后就是尾部tabbar那块。

状态栏就是我们手机显示电量，wifi的那部分，也算是头部的组成之一。这个状态栏高度我们可以很轻易地就能拿到，也就是调用uni.getSystemInfoSync().statusBarHeight。

导航栏就是默认的标题栏，微信小程序的小胶囊是在导航栏垂直居中的，我们要说的就是算导航栏的高度。

这个我们在不能在uniapp中直接拿到，可以看看官方的文档，我们要拿的就是微信小程序的导航栏高度。

其实我们调用原生微信小程序api也不能直接拿到导航栏高度......，但我们可以拿到微信小程序右上角小胶囊的宽高和定位信息，我们可以调用原生微信小程序api拿到，这些信息我们后面算导航栏高度的时候要用到。

这个小胶囊的定位信息是相对于小程序头部来看的

因为每一个部手机的导航栏高度是不一样的，我们应该动态的去获取导航栏的高度，像上面的搜索框，我们要怎么让搜索框和微信小胶囊垂直居中呢，因为小胶囊是在导航栏中垂直居中，所以我们也要让搜索框在导航栏中垂直居中，那么我们就要拿导航栏的高度，然后就可以轻松的通过flex布局实现垂直居中了。

先看一下图吧

因为小胶囊在导航栏中是垂直居中的，所以说，小胶囊距离导航栏顶部的距离和距离底部的距离是一样的，由此我们可以推算出计算公式：

然后我的建议是可以把这写参数封装在uniapp的全局的变量globalData中，哪个页面要用就可以直接拿，而且拿起来也非常方便。

我们不需要用vuex去管理，因为这个一开始就确立的，后面不用改，并不涉及状态管理。

最后，再来看看我写的代码吧。

App.vue：

我们可以做的更好些，把这个封装到mixin.js，我们哪个页面要用这些参数，就直接导入混入，然后在生命周期onLoad中调用下就好了。

mixin.js：

还有一个点要说的是：我为什么不在globalData中直接去拿可使用窗口高度windowHeight呢？

这也是我踩的一个坑，我们讲讲可使用窗口高度，我们不定义导航栏，那么

如果我们自定义了导航栏，则

我们并不是每个页面的都要自定义导航栏，那么，每个页面的windowHeight是有所不同的，所以说，我们不能在小程序加载后，就定死windowHeight，我们应该根据每个页面去拿windowHeight。