UniApp 页面布局自定义头部导航

动态计算头部高度与内容偏移量：实现 UniApp 页面布局的精准适配

在移动端应用开发中，页面布局的精准适配是一个关键问题。尤其是在 UniApp 中，不同设备的屏幕尺寸、状态栏高度以及头部布局的差异，可能导致页面内容错位或显示不全。本文将分享如何通过动态计算头部高度，实现页面内容的精准定位，确保在不同设备上都能正确显示。

问题背景

在移动端页面中，通常会有固定的头部（如导航栏、搜索框等），而页面内容需要根据头部的高度动态调整位置，以避免内容被遮挡。例如，在 UniApp 中，状态栏高度和头部高度可能因设备而异，因此需要动态计算并设置内容的 margin-top。

实现思路

获取状态栏高度：
- 使用 uni.getSystemInfoSync() 获取设备的状态栏高度。
动态计算头部高度：
- 使用 uni.createSelectorQuery() 获取头部元素的高度。
设置内容偏移量：
- 根据头部高度和状态栏高度，动态计算并设置内容的 margin-top。

实现代码

以下是实现后的完整代码：

<template><view class="container"><!-- 头部 --><view class="mp-header"><view class="sys-head" :style="{ height: statusBarHeight }"></view><view class="serch-box" :style="{ height: searchBoxHeight + 'px' }"><view class="serch-wrapper"><image@click="handleUrl('/pages/mine/message/index')"class="logo-left"src="@/static/new-img/index-icon1.png"mode="widthFix"></image><imageclass="logo-cen"src="@/static/new-img/index-icon2.png"mode="widthFix"></image></view></view></view><!-- 内容区域 --><view class="part part1" :style="{ marginTop: `${poTop}px` }">测试</view></view>
</template><script>
export default {data() {return {statusBarHeight: "0px", // 状态栏高度searchBoxHeight: 40, // 搜索框高度poTop: 0, // 动态计算的偏移量};},onLoad() {this.getSystemInfo();this.getHeaderHeight();},methods: {// 获取系统信息getSystemInfo() {const systemInfo = uni.getSystemInfoSync();this.statusBarHeight = systemInfo.statusBarHeight + "px";},// 获取头部高度并计算偏移量getHeaderHeight() {uni.createSelectorQuery().select(".mp-header").boundingClientRect((data) => {// 计算 poTop：头部高度 + 固定值 84this.poTop = Number(data.height) + 84;}).exec();},// 处理导航跳转handleUrl(url) {uni.navigateTo({url: url,});},},
};
</script><style scoped lang="scss">
.container {position: relative;
}.mp-header {z-index: 999;position: fixed;left: 0;top: 0;width: 100%;background: #fff;.serch-wrapper {height: 100%;position: relative;padding: 8rpx 20rpx;.logo-cen {width: 194rpx;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.logo-left {width: 48rpx;height: 48rpx;position: absolute;left: 30rpx;top: 50%;transform: translateY(-50%);}}
}
</style>

代码解析

状态栏高度：
- 在 onLoad 生命周期中调用 getSystemInfo()，获取设备的状态栏高度并存储在 statusBarHeight 中。
头部高度：
- 在 getHeaderHeight() 方法中，使用 uni.createSelectorQuery() 获取 .mp-header 的高度，并计算 poTop（头部高度 + 固定值 84）。
动态调整内容位置：
- 将 part1 的 margin-top 设置为 poTop，确保内容区域根据头部高度动态调整。