开启页面自定义导航栏功能
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)文章来源：https://www.toymoban.com/news/detail-664161.html
<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 自定义页面状态栏的核心代码了，这样的自定义状态栏是自动适配手机的状态栏的。文章来源地址https://www.toymoban.com/news/detail-664161.html
到了这里，关于uniapp 自定义手机顶部状态栏（适配状态栏高度）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
