# 完美微信小程序自定义导航栏

最近做了一个微信小程序，UI 设计出来一个界面，需要在首页将背景图全屏展示，一直以为顶部菜单是固定的，只能使用黑色或白色样式，当设计提出时，我还信誓旦旦的说，微信小程序功能不支持。。。

后来搜索了一下，这个东西叫自定义顶部导航栏，是我把文档看漏了

## 准备工作

在 index.json 下面内容

```json
"navigationStyle": "custom",
```

这是隐藏后的效果，右边那个叫胶囊的按钮，是隐藏不了的。


## 高度分析

高度分为状态栏，胶囊的高度，以及胶囊上下的间隙

通过 [`wx.getSystemInfo({})`](https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfo.html) 方法可以获取状态栏高度

```javascript
wx.getSystemInfo({  // 这个是同步方法
  success(res) {
    statusBarHeight = res.statusBarHeight
    console.log('状态栏的高度', statusBarHeight)
  }
})
```

[`wx.getMenuButtonBoundingClientRect()`](https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html) 方法可以获取胶囊的高度，位置，即胶囊按钮距离顶部的距离


```javascript
const rect = wx.getMenuButtonBoundingClientRect()
const { top, height, width } = rect
console.log('胶囊按钮距离顶部的距离', top)
console.log('胶囊按钮自身高度', height)
```

![console-log.png](https://res.qaws.dev/dev/slove-wechat-miniprogram-navigation-height/iphone-console-log.png align="center")


## 计算高度

导航栏的高度 = 状态栏的高度 + 胶囊按钮与状态栏的上间距及下间距 + 胶囊按钮自身高度

```javascript
const padding = (statusBarHeight + (top - statusBarHeight) * 2 + height)

this.setData({
  padding: padding
})
```

## 真机显示效果

iPhone
![iphone-preview.png](https://res.qaws.dev/dev/slove-wechat-miniprogram-navigation-height/iphone-preview.png align="center")

iPad
![ipad-preview.png](https://res.qaws.dev/dev/slove-wechat-miniprogram-navigation-height/ipad-preview.png align="center")

Android
![android-preview.png](https://res.qaws.dev/dev/slove-wechat-miniprogram-navigation-height/android-preview.jpg align="center")


Have Fun ~