uni-app 自定义导航栏并固定居中对齐

uni-app 自定义导航栏并使用flexed定位 , 我的需求是有一个选择器的 这里没有加上去

1. 效果图

2. 取消uni-app原生导航

首先找到page.json文件中对应的路径修改style 具体参数看官方 只需要把原来的style替换成我下面写的这样

{
	"path": "pages/stock/stock",
	"style": {
		"navigationBarTitleText": "库存",
		"navigationStyle": "custom",
		"app-plus": {
			"titleView": false
		}
	}
},

3. template中布局

注意看 我下面有个60像素的容器 是因为到时候我们会固定顶部 为了避免下方的内容顶上来 所以要保留一定的距离

<!-- 这里是状态栏 -->
<view class="status_bar"></view>
<!-- 自定义状态栏 -->
<view class="status_title">
	<view class="status_center">库存</view>
</view><!-- 自定义状态栏 -->
<view style="height: 60px;"></view>

4.CSS样式

注意看这里的高度 使用的是 var(--status-bar-height) 这个是官方写的获取手机状态栏高度 , 这里两个css 都建议写固定定位 如果外层的容器没有固定的话 虽然头部固定了 但是下面的样式会滚动 不清楚的话可以自己测试

/* 自定义状态栏 + 固定 */
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 998999;
}

/* 自定义导航栏 */
.status_title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 20px 11px;
	background-color: #0984FF;
	line-height: 44px;
	color: #FFFFFF;
	position: fixed;
	top: var(--status-bar-height);
	z-index: 998999;
}