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

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

写在前面：
配置完成需要重启编辑器（甚至不行就重启电脑）才会生效！！！

1. 效果图

2. pages.json配置

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

		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "",

				// 使用自定义状态栏
				"navigationStyle": "custom", // 隐藏系统导航栏
				"navigationBarTextStyle": "white", // 状态栏字体为白色
				
				// 支付宝、钉钉 小程序，需要添加如下配置才能生效
				"mp-alipay": {
					"transparentTitle": "always",//导航栏透明设置  always一直透明 / auto 滑动自适应 / none 不透明
					"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>
	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 = phoneStatusHeight
				console.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>

---

⚠️ 注意：如果按照上述方式设置之后没生效，一定要重启编辑器，甚至重启电脑