微信小程序自动获取顶部导航栏高度

1、本人是通过uniapp开发的微信小程序,原生开发基本相同,首先在data里声明变量

data{
    return{
        menuButtonInfo: '',
		navHeight: '',
		searchMarginTop: '',
		searchHeight: '',
		searchWidth: '',
    }
}

2、其次在onLoad生命周期中获取当前手机的导航栏宽高数据

onLoad: function(e) {
			this.menuButtonInfo = wx.getMenuButtonBoundingClientRect()
			const {
				top,
				width,
				height,
				right
			} = this.menuButtonInfo
			wx.getSystemInfo({
				success: (res) => {
					const {
						statusBarHeight
					} = res
					const margin = top - statusBarHeight
					this.navHeight = (height + statusBarHeight + (margin * 2)),//导航栏总高
					this.searchMarginTop = statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
					this.searchHeight = height, // 与胶囊按钮同高
					this.searchWidth = right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
				},
			})
}

3、navHeight获取的是当前手机型号的导航栏总高度;searchMarginTop获取的是手机顶部到小程序胶囊的高度,也就是下图黄色线框的高度;searchHeight获取的是胶囊的高度,也就是下图绿色线框的高度;searchWidth获取的是屏幕左侧到胶囊左侧的宽度,也就是下图中黑色线框的宽度。

 注:全靠闫皇一手教我。

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现微信小程序自定义navigationbar顶部导航栏的兼容适配,首先需要明确几个关键点。 1. 自定义导航栏的设计:根据产品需求和界面设计,确定导航栏的样式、背景色、标题和按钮等元素。 2. 获取手机屏幕的尺寸:小程序可以使用`wx.getSystemInfoSync()`方法获取手机屏幕的尺寸信息。 3. 设置导航栏高度:根据系统的不同,导航栏高度也会有所差异。可以把导航栏高度设置为一个相对较大的值,以适应大部分机型。当实际机型不同导航栏高度时,可以根据不同机型进行适配。 4. 适配不同机型的刘海屏或异形屏:对于刘海屏或者异形屏的机型,需要判断屏幕顶部是否存在刘海等异形部分,并进行相应的适配。可以使用`wx.getMenuButtonBoundingClientRect()`方法来获取右上角胶囊按钮的位置信息,从而确定导航栏背景的偏移和大小。 5. 设置页面的顶部内边距:在有自定义导航栏的情况下,为了避免导航栏遮挡页面内容,需要设置页面的顶部内边距。 6. 适配多端:微信小程序支持在不同的平台上运行,如iOS、Android、小程序开发工具等。因此要确保自定义导航栏在不同平台上的显示效果一致。 综上所述,通过了解手机屏幕尺寸、设置导航栏高度和背景、适配刘海屏、设置页面内边距以及多端适配等步骤,可以实现微信小程序自定义navigationbar顶部导航栏的兼容适配,使其在不同机型上都能够正常显示和使用。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值