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

创建一个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"`

在这里插入图片描述

展示效果图

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/88677.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/88677.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！