uniapp一个关于自定义导航栏高度计算的问题

问题核心

自定义导航栏没有正确计算状态栏高度，导致导航栏和状态栏重叠在一起了。

解决方案

1. 获取系统信息

javascript 复制代码

// 获取系统信息，包含状态栏高度等数据
const systemInfo = uni.getSystemInfoSync()
console.log(systemInfo)

2. 关键数据解析

状态栏高度 ：systemInfo.statusBarHeight （单位：px）
胶囊按钮信息 ：uni.getMenuButtonBoundingClientRect()

3. 完整代码实现

javascript 复制代码

// 获取导航栏所需的所有高度信息
function getNavBarInfo() {
  const systemInfo = uni.getSystemInfoSync()
  
  // 状态栏高度（px）
  const statusBarHeight = systemInfo.statusBarHeight || 0
  
  // 获取胶囊按钮信息
  let menuButtonInfo = {}
  try {
    menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  } catch (e) {
    // H5等环境可能没有胶囊按钮
    menuButtonInfo = { top: 0, height: 0 }
  }
  
  // 计算导航栏总高度
  // 公式：状态栏高度 + (胶囊按钮top - 状态栏高度) * 2 + 胶囊按钮高度
  const navBarHeight = statusBarHeight + 
                      (menuButtonInfo.top - statusBarHeight) * 2 + 
                      menuButtonInfo.height
  
  return {
    statusBarHeight,        // 状态栏高度
    menuButtonInfo,         // 胶囊按钮信息
    navBarHeight           // 导航栏总高度
  }
}

// 在组件中使用
export default {
  data() {
    return {
      navBarInfo: {}
    }
  },
  mounted() {
    this.navBarInfo = getNavBarInfo()
    console.log('导航栏信息:', this.navBarInfo)
  }
}

4. 模板中使用

html 复制代码

<template>
  <view>
    <!-- 状态栏占位 -->
    <view :style="{ height: navBarInfo.statusBarHeight + 'px' }"></view>
    
    <!-- 导航栏内容 -->
    <view class="nav-bar" :style="{ height: (navBarInfo.navBarHeight - navBarInfo.statusBarHeight) + 'px' }">
      <text>我是导航栏标题</text>
    </view>
    
    <!-- 页面内容 -->
    <view class="content" :style="{ marginTop: navBarInfo.navBarHeight + 'px' }">
      页面主要内容...
    </view>
  </view>
</template>

5. 样式优化

css 复制代码

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  z-index: 999;
}

核心要点

状态栏高度：直接从系统信息获取
胶囊按钮：包含top、height等信息
导航栏总高度 = 状态栏高度 + 上下间距 + 胶囊按钮高度
填充区域：用空view占位，避免内容被遮挡

多平台兼容

小程序：有完整的胶囊按钮信息
H5：状态栏高度为0，需要特殊处理。设置多高都是，看情况，40、50都可
App：同样可以获取到状态栏高度

这样就能完美解决导航栏和状态栏重叠的问题了！