uni-app 小程序自定义导航栏_uniapp navigationstyle

1、在pages.json添加自定义配置
navigationStyle:导航栏样式，支持default/custom，custom即取消默认的原生导航栏，自定义导航栏，只保留右上角胶囊按钮。官方文档链接

1. 设置全局的导航栏：
   
2. 设置每个页面的导航栏：（页面中配置项会覆盖 globalStyle 中相同的配置项）
   
   我这里用的是第二种，给单个页面设置的：

"pages": [
	{
		"path": "pages/wearPart/wearPart",
		"style": {
			"navigationBarTitleText": "易损件",
             "navigationStyle":"custom",
	        "navigationBarTextStyle": "black"
		}
	},  
]
1
2
3
4
5
6
7
8
9
10

2、配置完成之后，自定义导航栏写法如下

<template>
	<view class="container">
        <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
        <view class="status-box">
            <!-- 状态栏下的文字内容 -->
            <text class="name">汽修公司</text>
            <img class="more-pic" src="@/static/img/down.png" alt=""  @click="onViewStore">
        </view>
	</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

.status_bar {
    height: var(--status-bar-height);
    width: 100%;
}
1
2
3
4

若只写这些css，自定义的标题栏内容会随着页面滚动，需要固定在头部

.status_bar {
    height: var(--status-bar-height);
    width: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    z-index: 1111;
}
.status-box {
    width: 100%;
    height: 50px;
    background: #fff;
    margin-top: 25px;
    padding: 10px 0 12px 20px;
    font-size: 16px;
    color: #060606; 
    font-weight: 500;
    position: fixed;
    top: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    .name {
        padding-right: 7px;
    }
    .more-pic {
        width: 10px;
        height: 10px;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

以上就是我自定义导航栏遇到的的问题以及解决办法。

如有错误或不足，欢迎各位大佬评论指正。