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

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

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

示例代码

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)

<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 自定义页面状态栏的核心代码了，这样的自定义状态栏是自动适配手机的状态栏的。