随着小程序功能越来越多，在部分页面中，顶部区域也需要利用起来，而且有些要求和app/h5等样式统一，所以需要使用到自定义顶部导航，分享下自用的定义顶部导航。

小程序现在支持在单个页面中设置顶部样式为自定义，只需要页面package.json中加入

"navigationStyle": "custom"

顶部导航分为状态栏区域和标题区域。状态栏区域可以通过 wx.getSystemInfoSync() 中的 statusBarHeight 获取其高度，通过 windowWidth 获取其宽度；标题栏则要通过 wx.getMenuButtonBoundingClientRect() 获取小程序右上方的操作按钮位置及大小，再通过计算其top和状态栏高度等获得，标题栏宽度为windowWidth，高度为 （<span style="font-size: 16px;">胶囊按钮的top - 状态栏高度</span>）\* 2 + 胶囊的高度。其他部分也通过类似的方法进行换算

为了便于复用，将其封装为组件，采用slot的方式将内容加载入组件中。

现共有3种样式

1.空余出左侧及中部区域

2.空出中部区域

3.透明顶部导航

代码片段：https://developers.weixin.qq.com/s/CJEjgbml7BG3