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

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

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

问题背景

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

实现思路

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

实现代码

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

vue 复制代码

<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>
          <image
            class="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：头部高度 + 固定值 84
          this.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，确保内容区域根据头部高度动态调整。

实现效果

兼容性：通过动态计算状态栏高度和头部高度，确保页面在不同设备上都能正确显示。
可维护性：代码结构清晰，逻辑明确，便于后续维护和扩展。

总结

通过动态计算头部高度和状态栏高度，我们可以有效解决移动端页面布局的适配问题。本文提供的实现方案不仅适用于 UniApp，也可以为其他移动端开发框架提供参考。希望这篇博客能帮助你更好地理解和实现动态布局的精准适配！

如果你有更多问题或需要进一步优化，欢迎在评论区留言！