微信小程序——自定义导航栏开发

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

微信小程序里的页面默认情况下是带有一个固定的顶部导航栏，主要包括返回按钮、页面标题以及右侧的胶囊按钮。我们的页面布局是从导航栏下方开始，但在有些页面布局中，我们希望页面能够从顶部开始，以显示更多的内容，比如，我们希望页面上方的banner图片从顶部开始，然后导航栏透明显示在图片的上层，那么这种布局就需要我们自定义微信小程序的导航栏；或者我们希望导航栏的内容能够自己定义一些符合公司的内容如logo等，也需要自定义导航栏。

开启自定义导航栏

在微信小程序的json配置文件中，我们将navigationStyle属性的值配置为custom，即可开启自定义导航栏，这时候微信小程序自带的导航栏将不展示（但会保留右侧的胶囊按钮），页面从最顶部开始布局，如下图，右侧的页面从顶部开始布局

"navigationStyle": "custom"

PS：需注意，如果我们需要整个小程序项目中的页面导航栏都是自定义的，那么只需在app.json文件中增加上述配置，即可对全部页面生效，如果只需单个页面自定义导航，那么直接在相应页面的json配置文件中配置就可以了。

自定义导航栏开发

导航栏布局如下：

因为微信小程序页面右上方的胶囊按钮是一直存在的，所以自定义导航栏的内容一般要和胶囊按钮水平居中，这样才会比较美观，所以我们需要获取胶囊按钮的布局信息以及状态栏的高度来计算出导航栏的高度，如下：

// 获取右上角胶囊按钮的位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
// 获取系统信息
const systemInfo = wx.getSystemInfoSync()

// 状态栏高度
const { statusBarHeight } = systemInfo
// 胶囊按钮上边界坐标top 高度height
const { top, height } = menuButtonInfo
// 导航栏高度
const navBarHeight = (top - statusBarHeight) * 2 + height + statusBarHeight;

我们通过getMenuButtonBoundingClientRect()方法获取到胶囊按钮的布局信息，主要用到其距离顶部的距离和自身高度，然后通过getSystemInfoSync()方法获取到系统信息，系统信息里面可以查询到状态栏高度statusBarHeight，然后根据这几个信息就可以算出来总体导航栏的高度navBarHeight，后面在导航栏的页面结构中，就可以设置其样式，如下：

<view style="height:{{navBarHeight}}px; padding-top: {{top}}px;">
  <view class="custom-nav-content" style="height: {{height}}px;">
     // 自定义导航栏内容，按钮、标题、logo等
  </view>
</view>

上述布局设置完成后，导航栏里要显示的内容（比如、公司logo、按钮、页面标题等）就可以根据要求自己进行开发了。