uniapp 自定义顶部导航栏所需的参数

最新推荐文章于 2024-09-18 18:51:07 发布

原创最新推荐文章于 2024-09-18 18:51:07 发布 · 656 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序 #小程序

该API用于获取微信小程序中被隐藏后依然存在的胶囊按钮的布局位置，包括其高度、宽度、边界坐标等，以便开发者在设计顶部内容时避免遮挡。通过调整机型适配比例系数，计算出适合当前设备的屏幕尺寸和状态栏高度，进一步确定导航栏的高度。

在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本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