微信小程序如何实现自定义导航栏、导航栏手机适配（获取导航栏、状态栏高度和胶囊位置）以及踩过的坑

背���：不用官方默认的导航栏，想用自己自定义的

实现效果：

关键词：顶部状态栏、顶部导航栏、顶部状态导航栏、胶囊

原理：

自定义导航栏无非就是求得导航栏高度，并让内容容器垂直方向居中于导航栏高度

1.获取手机系统状态栏高度

2.获取胶囊位置（包括高度）

3.求得导航栏高度（导航栏高度实际上就是胶囊高度+高度差*2）

高度差 = 胶囊位置到屏幕顶部距离（menu.top,menu为胶囊位置对象）-状态栏高度（直接获取res.statusBarHeight）

（所有单位长度默认px）

     // 获取手机系统信息     wx.getSystemInfo({      success: res => {             // 手机系统状态栏高度        wx.setStorageSync('statusBarHeight', res.statusBarHeight)        const platform = res.platform        const menu =  wx.getMenuButtonBoundingClientRect()        //menu为胶囊，判断是否能读到胶囊位置，读不到则用具体一般数值表示        if (menu) {          wx.setStorageSync('menu', menu)          // 导航栏高度          wx.setStorageSync('navBarHeight', menu.height+(menu.top-res.statusBarHeight) *2 )          // 状态栏加导航栏          wx.setStorageSync('navStatusBarHeight', res.statusBarHeight+ menu.height+(menu.top-res.statusBarHeight) *2 )        }else{          wx.setStorageSync('menu', null)          // 导航栏高度          wx.setStorageSync('navBarHeight', platform === 'android' ? 48 : 44)           // 状态栏加导航栏           wx.setStorageSync('navStatusBarHeight', res.statusBarHeight+ (platform === 'android' ? 48 : 44) )        }      }, fail(err) {        console.log(err);      }    })

那么如何保持胶囊位置左边的搜索图标呢？

获取到胶囊到屏幕左侧的值，意思是menu.left，让容器等于这个menu.left值，然后让图标水平靠右即可

示例代码：

wxml

                          翡翠世界        交易走淘宝 | 48H鉴赏期                          

js

  data: {    // 状态栏高度    statusBarHeight: wx.getStorageSync('statusBarHeight'),    // 导航栏高度    navBarHeight: wx.getStorageSync('navBarHeight'),    // 导航栏和状态栏高度    navStatusBarHeight: wx.getStorageSync('navStatusBarHeight'),    // 胶囊    menu:wx.getStorageSync('menu')  },

wxss

/* 自定义导航栏 */.navigation-container {  position: fixed;  width: 100%;  z-index: 99;  background-color: rgb(28, 190, 96);}.navigation-bar {  position: relative;  width: 100%;  display: flex;  flex-direction: row;  color: #333333;}.nav-title {  display: flex;    margin-left: 20rpx;  box-sizing: border-box;}.nav-search {  position: absolute;  display: flex;  justify-content: flex-end;  align-items: center;}.bg-logo {  width: 300rpx;  display: flex;  flex-direction: column;  color: #f7f7f7;  position: absolute;  top: 0;  left:20rpx;}

踩过的坑

1.误用rpx，因为想着适配一下手机设备高度，就将设备获取到的高度×2，再把单位换成rpx，这会导致“不可预料的事情发生”，后面导航栏那块高度就统一用px了，字体当然也用px了，其实在计算导航栏的时候以及根据设备来计算出px值了，实际上已经适配过一次高度，字体大小另说。

2.系统获取到的胶囊位置，距离右屏幕的值是个未解之谜，理论上是很小的，但是获取到的right大到有几百，本来我是想通过这个属性来计算搜索图标的位置的，right比left还要大就很奇怪。