最近在做一个小程序项目，要求自定义导航栏，自定义导航栏好说，但是想要胶囊对其就没那么简单了
官方也没有给出具体的做法，然后上百度，最终将实现代码给有类似困扰各位同猿分享
实现效果图
iPhone 5
iPhone 6/7/8
iPhone X
iPad
想要胶囊对齐，就要搞清楚，它是由什么组成的
图片，是在网上找的，自己不会作图，只为说明问题，侵联删，如有打扰，请谅解
它是由状态栏和导航栏两部分组成，所以想要实现对齐，就得拿到状态栏和导航栏的高度
获取状态栏高度
wx.getSystemInfo({success(res) {console.log("状态栏：" + res.statusBarHeight)}})
接下来就是烧脑的时候了，你无法获取导航栏的高度，官方没有相应的API，那怎么办，只能跟着我一步一步往出算
但是官方给出了获取胶囊信息的API：wx.getMenuButtonBoundingClientRect()，没错就是这个
然后你打印出来，就得到了这个结果：
这就是胶囊的宽高大小，位置信息，注意，胶囊这里和状态栏获取的，单位都是px，不是rpx
好了，现在胶囊的高度是有了，但是，请看上面第一张图，胶囊是垂直居中的，所以它还有上下边距，接下来就是要求出这个边距
你刚获取的胶囊信息里面有个top值，他是距离手机顶部的高度，然后刚刚又得到了状态栏高度，
用top值减去状态栏的高度，就是上边框的高度了，然鹅，这里需要用到line-height属性，就需要上下边框，需要给top值乘以二就是上下边距
好了，思绪理通了，做就完了，话不多说，上代码
js代码
// data存放取值data: {navHeight: 0,top: 0,stateHeight: 0},// 获取状态栏信息fn() {let stateHeight = 0;// 接收状态栏高度let navHeight = wx.getMenuButtonBoundingClientRect().height;// 获取胶囊高度let top = 0;wx.getSystemInfo({success(res) {console.log("状态栏：" + res.statusBarHeight)stateHeight = res.statusBarHeight;}})top = wx.getMenuButtonBoundingClientRect().top -stateHeight;// 获取top值// 然后将取到的值返回在data里面this.setData({time: time,navHeight: navHeight + top*2,// 导航栏高度stateHeight: stateHeight// 状态栏高度})}onLoad: function (options) {this.fn();},
wxml代码
<navigator url="/pages/index/index" style="background: #ccc; color: #fff;"><!-- 状态栏高度：这里需要一个空的view来占位，不然用line-height就跑偏了 --><view style="height: {{stateHeight}}px"></view> <!-- 导航栏高度，这里转换为了rpx --> <view class="time" style="height: {{navHeight}}px; line-height: {{navHeight}}px; text-align: center; ">{{time}}</view></navigator>
这个获取单位是px，之前换算的rpx，不同设备对rpx换算的比率不一样，导致高度有偏差
换算不规范，页面两行泪
码云链接地址
测试的源码我放在了码云上，有兴趣的可以下载来看看，别忘了帮我点一下star，蟹蟹
