前言

微信小程序（以下简称小程序）的自定义导航栏样式已经开放很久了，一直也没深入的研究过。前段时间时间看到Readhub小程序版的更新，依然极简的UI、赏心悦目的体验，让人感觉这一切仿佛本该如此。借此机会，研究一下自定义导航栏的用法。

正文从这开始

目前小程序的状态栏（navigationStyle:default/custom;）可设置模式有两种。并且只能在app.json 中设置全局属性，不支持单个页面的更改。

第一种 是 default（默认）也是我们常见的，此时：

screenHeight = statusBarHeight + tabBarHeight + windowHeight;

这个时候是不需要自己考虑各个高度问题的，小程序会帮你调（xie）整（si）好（de）statusBarHeight、tabBarHeight，此时你只能在app.json 中设置 navigation 的背景色、标题、颜色等。

第二种是 custom 模式，此时：

screenHeight = windowHeight;

custom 模式可自定义导航栏，只保留右上角胶囊状的按钮。这种模式真的好啊有没有！！！对真的全面显示很友好啊有没有，对比一下你就知道了。

那么问题来了，如果我需要像Readhub那样在navigation 加一个自定义的icon和一个标题怎么办，没有了小程序祖传的导航栏做靠山（其实默认模式写死也挺好的），只能是自己动手实现下图效果。

经过大（数）量（十）的（个）数据采集，可以确定在Android和iOS的设备上statusBarHeight=20px，tabBarHeight则有所区别，Android设备上为22px，iOS设备上为24px。（都是猜出来的，准不准看缘分，反正测试了没有猫饼）这样，在需要全屏展示的时候，例如图片视频等可以尽屏幕之所用；在需要 默认的navigation 时，又可以写成默认的样子做到icon、title、胶囊早同一水平线上，以假乱真。

最后说一句：以上数据建立在非大数据的基础上，如有错误欢迎大佬留言批评！