uni-app - - - - - 自定义状态栏

devtools/2024/11/19 16:37:29/

1. 效果图

在这里插入图片描述

2. pages.json配置

在需要使用自定义状态栏的页面，添加如下配置

		{"path": "pages/index/index","style": {"navigationBarTitleText": "",// 使用自定义状态栏"navigationStyle": "custom", // 隐藏系统导航栏"navigationBarTextStyle": "white", // 状态栏字体为白色// 支付宝、钉钉 小程序，需要添加如下配置才能生效"mp-alipay": {"transparentTitle": "always","titlePenetrate": "YES"}}},

3. 页面使用

代码如下：

<template><view class="common-containter"><!-- 自定义导航栏 --><view class="custom-status-containter"><view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view><up-navbar :style="{height: '44px'}" title="球类房" :autoBack="true"></up-navbar></view><view class="custom-page" :style="{ height: pageHeight}">测试文本</view><!-- 自定义tabbar --><custom-tabbar :curr-page="0" /></view>
</template><script>javascript">import {ref,onMounted} from "vue";export default {name: "Aaa",setup() {const statusBarHeight = ref(0); // 状态栏高度const navbarHeight = ref(40); // 导航栏高度 const pageHeight = ref(0); // 页面剩余高度const setHeight = () => {console.log(uni.$u.config.v);//获取手机状态栏高度let phoneStatusHeight = uni.getSystemInfoSync()['statusBarHeight'];statusBarHeight.value = phoneStatusHeightconsole.log('获取手机状态栏高度', phoneStatusHeight + 'px')let navbarStatusHeight = phoneStatusHeight + navbarHeight.value;console.log('状态栏+导航栏 总高度', navbarStatusHeight + 'px')//  页面剩余高度let pageRemainingHeight = `calc(100vh - 188rpx - ${navbarStatusHeight}px)`console.log('页面剩余高度', pageRemainingHeight)pageHeight.value = pageRemainingHeight}onMounted(() => {setHeight()})return {statusBarHeight,navbarHeight,pageHeight};},};
</script><style lang="scss">.u-navbar {height: 40px;background-color: cadetblue;}.custom-status-containter {background-color: red;}.custom-status-containter .status-bar {background-color: aquamarine;}.custom-status-containter .u-navbar {background-color: cadetblue;}.custom-page {padding: 10rpx;box-sizing: border-box;background-color: #ccc;}
</style>