1、在pages.json添加自定义配置
navigationStyle:导航栏样式,支持default/custom,custom即取消默认的原生导航栏,自定义导航栏,只保留右上角胶囊按钮。官方文档链接
- 设置全局的导航栏:
- 设置每个页面的导航栏:(页面中配置项会覆盖 globalStyle 中相同的配置项)
我这里用的是第二种,给单个页面设置的:
"pages": [
{
"path": "pages/wearPart/wearPart",
"style": {
"navigationBarTitleText": "易损件",
"navigationStyle":"custom",
"navigationBarTextStyle": "black"
}
},
]
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>
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
若只写这些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;
}
}
以上就是我自定义导航栏遇到的的问题以及解决办法。
如有错误或不足,欢迎各位大佬评论指正。