uniapp 自定义手机顶部状态栏（适配状态栏高度）

廖若星辰LTY2023-08-22 19:40

开启页面自定义导航栏功能

uniapp 在 pages.json 页面设置了全局的 globalStyle 的 "navigationStyle": "custom" 或单页面的 style 的 "navigationStyle": "custom" 之后页面顶部就没有自带的导航栏了，这时用户可自定义该页面的顶部导航栏。

示例代码

HTML

html 复制代码

<template>
	<view class="page">
		<view :style="{width: '100%', height: statusBarHeight + 'px'}"></view>
		<view class="top-tab flex-c" :style="{height: navHeight + 'px'}">
			<view class="title" v-if="title">{{title}}</view>
		</view>
	</view>
</template>

js(示例为：vue 3 的 js)

javascript 复制代码

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	
	// 手机屏幕信息
	const window = uni.getWindowInfo()
	// 胶囊信息
	let menu = uni.getMenuButtonBoundingClientRect()

	const statusBarHeight = ref(0)
	statusBarHeight.value = window.statusBarHeight // 手机状态栏高度
	const navHeight = ref(0)
	navHeight.value = (menu.top - window.statusBarHeight) * 2 + menu.height // 导航栏高度
	
</script>

以上就是关于 uniapp 自定义页面状态栏的核心代码了，这样的自定义状态栏是自动适配手机的状态栏的。