uni-app 吸顶出现错误，获取导航栏高度的方法

最新推荐文章于 2025-07-03 10:53:24 发布

原创最新推荐文章于 2025-07-03 10:53:24 发布 · 721 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app 吸顶 #导航条高度

uni-app 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在uni-app中针对不同手机型号动态获取导航条的高度，以便实现页面吸顶样式。通过调用uni.createSelectorQuery()方法，选择导航条类名并获取其boundingClientRect，从而得到导航条的高度，并将其赋值给元素的top属性，实现自适应的吸顶效果。

uni-app 做吸顶样式时，由于手机型号的不同，导航条的高度也会有所区别，需要动态获取导航条的高度。

onReady(){
			    // .tui-navigation-bar为导航条类名
			    let info = uni.createSelectorQuery().select('.tui-navigation-bar')
			    info
			      .boundingClientRect((data) => {
			        this.stickyTop = data.height // stickyTop 需要设置的top高度
			      })
			      .exec()
		},