微信小程序 - 自定义头部导航栏

自定义头部导航栏过程

1.json文件中设置导航栏样式自定义，设置后可隐藏除右侧胶囊外的所有头部导航栏

 "navigationStyle":"custom"

2.在js文件中获取当前手机的顶部状态栏高度

用wx.getSystemInfoSync()获取系统信息，里面有个参数：statusBarHeight（状态栏高度）。

用wx.getMenuButtonBoundingClientRect()可以获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点。

导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度。

3.编写wxml内容，下略

4.在wxss文件中设置定位为fixed（如果设置absolute，当页面超出原本高度后，会出现顶部只有胶囊移动的情况）

注意设置好间距，因为fixed定位会遮盖下方的内容