1.引言

在小程序应用开发过程中，导航栏作为页面标题性的存在，不但起到了用户指引路由的作用，更是在应用功能较为完善和复杂的情况下，起到了进一步的功能性作用，小程序的原生导航栏如下：

显然，原生的导航栏除了能够提供标题，返回键等功能外，其他功能到目前为止并没有浮出水面。而为了定制符合我们自己开发要求的导航栏，此时，我们就需要对导航栏进行自定义的设计开发。自定义开发过导航栏效果如图：

2.原理及思路

（1）原理

首先我们要知道几个概念：状态栏，导航栏，导航栏胶囊，导航栏胶囊在导航栏中的上下边距

状态栏:是指通常手机顶部显示手机运营商，手机信号，手机电量等等信息的最顶层一栏。

导航栏：是指在小程序中显示胶囊按钮，返回键，标题的一栏。

导航栏胶囊：是指小程序中导航栏右部出现的胶囊状按钮，小程序中会一直置顶显示，在不同的机型中，胶囊的高度是固定的，目前均为32px。

导航栏胶囊在导航栏中的上下边距：胶囊按钮在导航中不是上下撑满的，是上下居中布局的，所以存在上下相等的边距。

效果说明图如下：

在小程序开发中，我们可以获取以下数据：

胶囊的布局位置及尺寸信息：（详情点击查看https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html）

wx.getMenuButtonBoundingClientRect()

（2）思路

原理我们都已经介绍过了，现在需要我们想一想设计的思路。

最常规的思路就是来个和导航栏一样宽度，一样高度的页面容器绝对定位覆盖在导航栏上面就可以了。然后在这个覆盖容器里面进行自定义发挥就可以了，保准自定义的内容和胶囊对齐的准准的，不会有任何问题。

那么，该怎么获取导航栏的高度和定位信息呢（宽度肯定是满宽，100vw）。

从上面的效果演示图我们可以知道，导航栏的高度是等于 胶囊高度+胶囊上边距 * 2 的，这个应该不难理解，胶囊高度上文已经提过，是固定的：32px,所以，我们只要再求出胶囊的上边距就可以了。上边距我们可以通过由 wx.getMenuButtonBoundingClientRect() 获取的胶囊距顶部的距离减去状态栏高度获取。从而计算出状态栏的高速。而后就可以实现我们一开始的思路，将一高度与导航栏相同，绝对定位在距屏幕顶部一个状态栏高度的距离便可以实现完全的导航栏精确覆盖。

3.代码实现

      //胶囊上边框距顶部距离
      const capsuleTop = wx.getMenuButtonBoundingClientRect().top;
      //状态栏高度
      const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
      //药囊上边距状态栏下边的距离，即药囊在导航内容栏中的上下边距
      const capsuleGap = capsuleTop - statusBarHeight;
      //导航内容栏的高度动态计算
      const navContentHeight = capsuleGap * 2 + this.data.capsuleHeight;

4.注意事项。

（1）在定位好的自定义导航栏里编写内容时，不要与胶囊重合，否则会被胶囊覆盖，此时需要计算可使用区域的宽度，在计算宽度时，为了达到各机型效果的一致，需要根据当前模拟机型的宽度进行px对rpx的换算，才能使自定义组件中的内容的宽度在各个机型中效果一致。

（2）本文所述自定义导航栏的创建方法必须基于该自定义导航栏针对页面fixed绝对定位的基础上才可以。

5.结语

在编写自定义导航栏之前也查了很多材料，感觉都不太准，自己借鉴着摸索了一套自己的方法，请大家评判一番，我已将该自定义导航栏封装成了微信小程序自定义组件，插之即用，以供大家提高生产效率：

NPM安装：https://www.npmjs.com/package/russell-weapp

github:https://github.com/RussellCao824/russell-weapp