動態計算頭部高度與內容偏移量：實現 UniApp 頁面布局的精準適配

在移動端應用開發中，頁面布局的精準適配是一個關鍵問題。尤其是在 UniApp 中，不同設備的屏幕尺寸、狀態欄高度以及頭部布局的差異，可能導致頁面內容錯位或顯示不全。本文將分享如何通過動態計算頭部高度，實現頁面內容的精準定位，確保在不同設備上都能正確顯示。

---

問題背景

在移動端頁面中，通常會有固定的頭部（如導航欄、搜索框等），而頁面內容需要根據頭部的高度動態調整位置，以避免內容被遮擋。例如，在 UniApp 中，狀態欄高度和頭部高度可能因設備而異，因此需要動態計算并設置內容的 margin-top。

---

實現思路

1. 獲取狀態欄高度：

   • 使用 uni.getSystemInfoSync() 獲取設備的狀態欄高度。

2. 動態計算頭部高度：

   • 使用 uni.createSelectorQuery() 獲取頭部元素的高度。

3. 設置內容偏移量：

   • 根據頭部高度和狀態欄高度，動態計算并設置內容的 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>

---

代碼解析

1. 狀態欄高度：

   • 在 onLoad 生命周期中調用 getSystemInfo()，獲取設備的狀態欄高度并存儲在 statusBarHeight 中。

2. 頭部高度：

   • 在 getHeaderHeight() 方法中，使用 uni.createSelectorQuery() 獲取 .mp-header 的高度，并計算 poTop（頭部高度 + 固定值 84）。

3. 動態調整內容位置：

   • 將 part1 的 margin-top 設置為 poTop，確保內容區域根據頭部高度動態調整。

---

實現效果

• 兼容性：通過動態計算狀態欄高度和頭部高度，確保頁面在不同設備上都能正確顯示。
• 可維護性：代碼結構清晰，邏輯明確，便于后續維護和擴展。

---

總結

通過動態計算頭部高度和狀態欄高度，我們可以有效解決移動端頁面布局的適配問題。本文提供的實現方案不僅適用于 UniApp，也可以為其他移動端開發框架提供參考。希望這篇博客能幫助你更好地理解和實現動態布局的精準適配！

---

如果你有更多問題或需要進一步優化，歡迎在評論區留言！