微信小程序自定义状态栏的高度设置
首选,要理解下面的这个公式:自定义导航栏的高度 = 手机状态栏高度 + 胶囊高度 + 胶囊的上下间距
然后我们通过以下分析
- 胶囊的上下间距是一致的。
- 这个间距在不同设备上是不一样的。
- 上间距 = 胶囊与手机状态栏的距离。
- 可以通过胶囊信息的 top 值减去手机状态栏的高度,从而得出胶囊的上间距。
其实最主要的还是要通过胶囊的位置信息来计算出自定义导航栏的。api详情:wx.getMenuButtonBoundingClientRec
代码示例:
// 获取设备信息 wx.getSystemInfo({ success: e => { // { statusBarHeight: 20, ... },单位为 px // 获取右上角胶囊的位置信息 let info = wx.getMenuButtonBoundingClientRect() // { bottom: 58, height: 32, left: 278, right: 365, top: 26, width: 87 },单位为 px let CustomBar = info.bottom + info.top - e.statusBarHeight } })