uni-app 自定义顶部状态栏注意事项

最新推荐文章于 2025-03-26 08:14:21 发布

碳酸饮料

最新推荐文章于 2025-03-26 08:14:21 发布

阅读量637

点赞数

分类专栏： uni-app 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/csdn_hss/article/details/122987705

版权

uni-app 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在uni-app中通过修改pages.json和组件代码，取消默认的原生导航栏，实现自定义导航栏设计。包括设置全局导航风格为custom，以及如何根据屏幕状态调整头部占位高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

框架：uni-app
场景：即取消默认的原生导航栏

解决方法可参考：
uni-app自定义导航栏使用注意

// pages.json 
{
	...
	"globalStyle": {
		...
		"navigationStyle": "custom",
	}
}

<template>
	<view>
		// 占位
		<view class="status_bar" :style="headStyle"></view>
		// 自定义导航栏
		<u-navbar title="工作台">
			<view class="u-nav-slot" slot="left"></view>
		</u-navbar>
	</view>
</template>

export default {
	computed: {
		...
		// 头部占位
		headStyle() {
			// 获取当前状态栏的高度
			const {
				statusBarHeight = 20
			} = uni.getSystemInfoSync();
			return `width: 100%; height: ${statusBarHeight + 44}px`;
		}
	}
}