uniapp获取状态栏高度，胶囊按钮的高度，底部安全区域的高度，自定义导航栏

相关API

uni.getSystemInfoSync()
uni.getMenuButtonBoundingClientRect()

创建一个utils文件夹，该文件下封装一个systemInfo.js

/**
 * 系统信息工具类
 * 封装获取系统状态栏、导航栏和安全区域等相关信息的方法
 */

// 获取系统信息并缓存
const systemInfo = uni.getSystemInfoSync();
//判断设备，H5没有胶囊按钮
// #ifndef H5
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif

// 默认值常量
const DEFAULT_STATUS_BAR_HEIGHT = 10;
const DEFAULT_BAR_HEIGHT = 44;
const DEFAULT_SAFE_AREA_INSETS = { bottom: 10, top: 0 };

/**
 * 获取状态栏高度
 * @returns {string|number} 状态栏高度，默认返回10px
 */
export const getStatusBarHeight = () => {
  return systemInfo.statusBarHeight || DEFAULT_STATUS_BAR_HEIGHT;
};

/**
 * 获取导航栏总高度（包括状态栏和标题栏）
 * @returns {number} 导航栏总高度，默认返回44
 */
export const getNavigationBarHeight = () => {
  try {
    const statusBarHeight = Number(systemInfo.statusBarHeight) || 0;
    return (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height;
  } catch (error) {
    return DEFAULT_BAR_HEIGHT;
  }
};

/**
 * 获取菜单按钮上边距
 * @returns {number} 菜单按钮上边距
 */
export const getMenuButtonTop = () => {
  return menuButtonInfo.top;
};

/**
 * 获取安全区域信息
 * @returns {Object} 包含bottom和top属性的安全区域对象
 */
export const getSafeAreaInsets = () => {
  return {
    bottom: systemInfo.safeAreaInsets?.bottom || DEFAULT_SAFE_AREA_INSETS.bottom,
    top: systemInfo.safeAreaInsets?.top || DEFAULT_SAFE_AREA_INSETS.top
  };
};

export default {
  getStatusBarHeight,
  getNavigationBarHeight,
  getMenuButtonTop,
  getSafeAreaInsets
};

封装一个nav-header.vue组件,在当前组件导入使用封装的，固定在顶部

<template>
	<view class="nav-layout">
		<!-- 状态栏高度 -->
	    <view class="status-bar" :style="{ height: `${getStatusBarHeight()}px` }"></view>
		<!-- 自定义导航栏 -->
	    <view class="search-bar" :style="{ height: `${getNavigationBarHeight()}px` }">
	        <text class="recommend">推荐</text>
	        <view class="search-container" @click="onSearchClick">
	            <uni-icons class="search-icon" type="search" size="22" color="#333" />
	            <text class="search-placeholder">搜索</text>
	        </view>
	    </view>
	</view>
	<!-- 占位 -->
	<view class="layout-fill" :style="{ height: `${getStatusBarHeight() + getNavigationBarHeight()}px` }"></view>
</template>

<script setup>
import {getStatusBarHeight,getNavigationBarHeight} from '@/utils/systemInfo.js'
</script>

<style lang="scss" scoped>
.nav-layout {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    background: 
        linear-gradient(to bottom, transparent, #fff 400rpx),
        linear-gradient(to right, #beecd8 20%, #f4e2d8);
    
    .status-bar {
        background-color: transparent;
    }
    
    .search-bar {
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        
        .recommend {
            font-size: 40rpx;
            font-weight: bold;
            padding-right: 30rpx;
            color: #333;
        }
    }
    
    .search-container {
        display: flex;
        align-items: center;
        border-radius: 40rpx;
        border: 2px solid #fff;
        width: 300rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
        
        &:hover {
            background: rgba(255, 255, 255, 0.5);
            transform: scale(1.02);
        }
        
        .search-icon {
            padding-right: 6rpx;
        }
        
        .search-placeholder {
            color: #666;
            font-size: 28rpx;
        }
    }
}

.layout-fill {
    width: 100%;
}
</style>
    

需要使用的页面导入nav-header.vue组件，自定义导航栏首先需要在page.json文件对应的路径去配置"navigationStyle": "custom"

展示效果图