通过实际测量,这是我摸索出的wx.getMenuButtonBoundingClientRect()获取的胶囊位置信息在实际页面具体指哪里,
left是以胶囊最左边的像素到屏幕最左边的距离
right是以胶囊最右边的像素到屏幕最左边的距离
top是以胶囊最上边的像素到屏幕最上边的距离
bottom是以胶囊最右边的像素到屏幕最上边的距离
知道位置后可以获取手机的状态栏高度(就是手机电量那栏),经过一番加减就可以得出自己需要的自定义导航栏高度了
uniapp里可以在app.vue里写下
onLaunch: function() {
uni.getSystemInfo({
success: function(e) {
Vue.prototype.$statusBar = e.statusBarHeight
// #ifdef MP-WEIXIN
let custom = wx.getMenuButtonBoundingClientRect();
console.log('statusBarHeight:',e.statusBarHeight);
console.log('wx.getMenuButtonBoundingClientRect:',custom);
Vue.prototype.$customBar = custom.bottom + custom.top - e.statusBarHeight
// #endif
}
})
console.log('自定义导航栏高度:', Vue.prototype.$customBar);
}