基于uniapp开发小程序自定义顶部导航栏状态栏标题栏

效果预览

实现原理:使用官方api获取系统信息,从系统信息里获取状态栏和胶囊按钮栏的高度信息,通过计算获取相应的顶部导航栏高度即可自定义

uniapp官方文档地址:https://uniapp.dcloud.net.cn/api/system/info.html

1 获取状态栏高度

javascript 复制代码

	// 获取窗口信息
	let WINDOW_INFO = uni.getWindowInfo()
	// 状态栏高度
	let statusBarHeight = WINDOW_INFO.statusBarHeight

	console.log('获取窗口信息：', WINDOW_INFO);

2 计算胶囊按钮区域标题栏的高度

通过uni.getMenuButtonBoundingClientRect()

获取胶囊按钮区域的信息,通过自身高度和距顶部的高度计算出该区域的高度

javascript 复制代码

// 标题栏胶囊按钮的信息
	let {top,height} = uni.getMenuButtonBoundingClientRect()
	// 标题栏高度
	let titleBarHeight = height + (top - statusBarHeight) * 2 
	console.log('标题栏高度：', titleBarHeight);

ok到此就可以得到顶部状态栏和标题栏的高度,根据这两个高度信息就可以自定义顶部导航栏了

进阶封装,方便后续使用(推荐使用该方案,已封装完成直接复制粘贴即可使用)

封装好的代码

将以将该工具库放入utils目录下食用

utils===>system.js

javascript 复制代码

//system.js
// uniapp官方文档地址:https://uniapp.dcloud.net.cn/api/system/info.html

// 获取系统信息
const SYSTEM_INFO = uni.getSystemInfoSync();

// 获取顶部状态栏高度
export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;

// 计算顶部标题栏高度
export const getTitleBarHeight = ()=>{
	if(uni.getMenuButtonBoundingClientRect){
		let {top,height} = uni.getMenuButtonBoundingClientRect();
		return height + (top - getStatusBarHeight())*2		
	}else{
		// 没有胶囊按钮时默认为40px，可自定义高度
		return 40;
	}
}

// 获取顶部导航栏总共高度
export const  getNavBarHeight = ()=> getStatusBarHeight()+getTitleBarHeight();

// 计算遮挡抖音小程序LOGO遮挡区域
export const getLeftIconLeft = ()=> {
	// #ifdef MP-TOUTIAO
		let {leftIcon:{left,width}}  = tt.getCustomButtonBoundingClientRect();
		return left+ parseInt(width);
	// #endif
	
	// #ifndef MP-TOUTIAO
		return 0
	// #endif	
}

食用方式

在需要的地方引入封装好的方法即可食用

javascript 复制代码

<template>
	<view class="custom-top-navigation-bar">
		 <!-- 食用方法 -->
		<view class="top-status-bar" :style="{height:getStatusBarHeight() + 'px'}">
			顶部状态栏
		</view>
		<view class="top-title-bar" :style="{height:getTitleBarHeight() + 'px'}">
			顶部标题栏
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	// 引入封装好的工具
	import {
		getStatusBarHeight,
		getTitleBarHeight
	} from '@/utils/system.js'
</script>

注意事项

注意:一些开发平台的logo会遮挡我们自定义的顶部导航栏,例如抖音等,因此我们可以使用对应平台的官方API来计算出来遮挡的区域(当然如果只做微信小程序可以忽略此处)