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
英文地址，請注明出處：http://en.pswp.cn/pingmian/88677.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！