在小程序平台,如果原生导航栏被隐藏,仍然在右上角会有一个悬浮按钮,微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息,方便开发者布局顶部内容时避开该按钮。
坐标信息以屏幕左上角为原点。
//获取胶囊按钮信息
var menuButton = uni.getMenuButtonBoundingClientRect();
// 设备系统信息
let systemInfomations = uni.getSystemInfoSync()
// 机型适配比例系数
let scaleFactor = 750 / systemInfomations.windowWidth
// 当前机型-屏幕高度
let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx
// 当前机型-屏幕宽度
let windowWidth = systemInfomations.windowWidth * scaleFactor //rpx
// 状态栏高度
let statusBarHeight = (systemInfomations.statusBarHeight) * scaleFactor //rpx
// 胶囊高度
let menuButtonHeight = menuButton.height * scaleFactor //rpx
// 胶囊宽度
let menuButtonWidth = menuButton.width * scaleFactor //rpx
// 胶囊上边界的坐标
let menuButtonTop = menuButton.top * scaleFactor //rpx
// 胶囊右边界的坐标
let menuButtonRight = menuButton.right * scaleFactor //rpx
// 胶囊下边界的坐标
let menuButtonBottom = menuButton.bottom * scaleFactor //rpx
// 胶囊左边界的坐标
let menuButtonLeft = menuButton.left * scaleFactor //rpx
// 微信小程序中导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
let navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2