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

在小程序平台,如果原生导航栏被隐藏,仍然在右上角会有一个悬浮按钮,微信下也被称为胶囊按钮。本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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值