uniapp获取tabbar和顶部导航栏高度

### 获取 UniApp 中 TabBar 和顶部导航栏的高度 在 UniApp 开发过程中，获取 TabBar 和顶部导航栏的高度对于页面布局至关重要。以下是具体实现方法： #### 使用 `uni.getSystemInfoSync()` 方法 此方法可以同步获取设备的整体信息，其中包括状态栏、导航栏等高度数据。 ```javascript let systemInfo = uni.getSystemInfoSync(); console.log(systemInfo.statusBarHeight); // 状态栏高度 console.log(systemInfo.platform); // 平台类型 ``` 为了更精确地获得导航栏高度，还可以通过自定义组件的选择器查询来完成[^2]。 #### 自定义选择器查询 利用 `uni.createSelectorQuery` 可以针对特定 DOM 节点执行尺寸计算操作。下面是如何用于测量固定 ID 的导航条目的实例: ```javascript onReady: function () { let navbar = uni.createSelectorQuery().select('#navBar'); navbar.boundingClientRect((data) => { console.log(data, '获取导航栏的高度'); this.navBarHeight = data.height; }).exec(); } ``` #### 动态设置样式属性 当已知这些高度之后，在模板部分就可以依据变量值调整视图位置或间距了。例如，使某个容器避开底部标签栏的影响[^3]: ```html <template> <view class="content" :style="{ marginTop: navHeight + 'px' }"> <!-- 页面主体内容 --> </view> </template> <script> export default { data() { return { navHeight: 0, }; }, onLoad() { const info = uni.getSystemInfoSync(); this.navHeight = info.statusBarHeight + (this.getNavBarHeight() || 44); }, methods: { getNavBarHeight() { try { const res = uni.getMenuButtonBoundingClientRect(); return res.bottom - res.top; } catch(e){ return null; } } } }; </script> ``` 上述代码片段展示了如何组合使用 API 来适应不同屏幕尺寸下的界面设计需求。 #### 统一处理多种高度参数 考虑到实际开发中的复杂情况，有时还需要考虑更多因素如安全区域距离等。这里提供了一种综合解决方案，能够一次性取得多个关键部位的高度数值[^4]: ```javascript getPosConfig() { let config = {}; Object.assign(config, uni.getSystemInfoSync()); if (!config.safeAreaInsets) { config.safeTopH = 0; config.safeBottomH = 0; } else { config.safeTopH = config.safeAreaInsets.top; config.safeBottomH = config.safeAreaInsets.bottom; } // 计算总高度并返回 return config; } ```