開啟頁面自定義導航欄功能
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)文章來源：http://www.zghlxwxcb.cn/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 // 手機狀態(tài)欄高度
const navHeight = ref(0)
navHeight.value = (menu.top - window.statusBarHeight) * 2 + menu.height // 導航欄高度
</script>以上就是關于 uniapp 自定義頁面狀態(tài)欄的核心代碼了，這樣的自定義狀態(tài)欄是自動適配手機的狀態(tài)欄的。文章來源地址http://www.zghlxwxcb.cn/news/detail-664161.html
到了這里，關于uniapp 自定義手機頂部狀態(tài)欄（適配狀態(tài)欄高度）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
