原生导航栏：

可以在app.json的 window 属性中或页面的 JSON 文件中设置 navigationBarTitleText（导航栏标题内容）、navigationBarTextStyle（导航栏标题颜色）、navigationBarBackgroundColor（导航栏背景色）。

自定义头部导航栏：

因为不同的手机型号头部导航栏高度可能不一致，所以为了适配更多型号，需要动态计算导航栏的高度。

状态栏高度可以通过 wx.getSystemInfo(）获取；

胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取；

所以导航栏高度=状态栏高度+胶囊按钮的高度+（胶囊按钮距离顶部的距离-状态栏的高度）*2；

实现方法：

新建 navbar 组件。

// navbar.wxml// 设置导航栏的高度等于实际获取的导航栏高度；设置返回箭头、文字所在 view 的高度等于胶囊按钮的高度，距离顶部的距离等于胶囊按钮距离顶部的距离，然后设置返回箭头、文字垂直居中<view class="navbar" style="background:{{background}};height:{{navbarHeight}}px"><view style="height:{{capsuleHeight}}px;top:{{capsuleTop}}px;" class="arrow-content"><view class="arrow" wx:if="{{isSowArrow}}" bindtap="handleGoToBack"></view></view><view class="text" style="height:{{capsuleHeight}}px;top:{{capsuleTop}}px">{{title}}</view></view>

//navbar.wxss.navbar{width: 100%;//设置导航栏固定在顶部position: fixed;top: 0;z-index: 99;}.arrow-content{position: absolute;left: 40rpx;z-index: 999;display: flex;align-items: center;}.arrow{width: 20rpx;height: 20rpx;border: 5rpx solid #FFFFFF;border-right-color:transparent;border-bottom-color:transparent;transform: rotate(-45deg);}.text{position: absolute;left: 0;right: 0;font-size: 28rpx;color: #FFFFFF;display: flex;align-items: center;justify-content: center;}

// navbar.js// 获取应用实例const App = getApp();Component({properties: {title:{type: String,value: '新视界'},background:{type: String,value: 'linear-gradient(to right,#FF3413,#FF924D)'},isSowArrow:{type: Boolean,value: true}},data:{capsuleTop: '', //胶囊距离屏幕顶部的距离capsuleHeight: '', //胶囊高度navbarHeight: '' //导航栏高度},lifetimes: {attached: function () {this.setData({capsuleTop: App.globalData.capsule.top, capsuleHeight: App.globalData.capsule.height, navbarHeight: (App.globalData.capsule.top - App.globalData.system.statusBarHeight) * 2 + App.globalData.capsule.height + App.globalData.system.statusBarHeight, })}},methods: {handleGoToBack(){wx.navigateBack({delta: 1})}}})

//app.jsApp({globalData: {system: '',capsule: ''},onLaunch: function () {// 在 app.js 中全局获取一次系统和胶囊信息// 获取系统信息wx.getSystemInfo({success: res => {this.globalData.system = res}})// 获取胶囊信息this.globalData.capsule = wx.getMenuButtonBoundingClientRect()}})

想要改变右上角胶囊按钮的颜色，可以在app.json中设置 window 的属性。navigationBarTextStyle

在要使用自定义导航栏的页面的 JSON 文件中设置"navigationStyle": "custom"，导航栏将会只保留右上角的胶囊按钮，此时再往屏幕中加元素，将会直接顶到屏幕顶端。

{"navigationStyle": "custom","usingComponents": {"navbar": "/components/navbar/navbar",}}

在要使用自定义导航栏的页面 WXML 文件中使用即可。

<navbar background="linear-gradient(to right, #0064FF , #33A9FF)"></navbar>