总结-微信小程序自定义顶部导航(超详细)附加效果图

一、在需要设置头部导航栏的页面中通过json配置 "navigationStyle": "custom" ，自定义导航栏，只保留胶囊按钮，效果如下：

 二、做完上面的步骤，基本上就可以自定义导航栏了，当然，这还没完，从页面上可以看出，页面里的内容被挡住了，可以通过页面样式加上内边距内容就出来了：

三、可以看出这个内边距是固定死了的，不同的手机型号头部那条栏目高度可能不一致，所以为了我们适配更多型号，我们需要计算3个值：

  

1. 整个导航栏的高度；

2. 胶囊按钮与顶部的距离；

3. 胶囊按钮与右侧的距离。

小程序可以通过 wx.getMenuButtonBoundingClientRect()