1. 在 app.json 文件中设置导航栏的样式：

"window": {"navigationStyle": "custom"
},
"usingComponents": {"nav-bar": "/components/navbar/navbar"}

2. 在app.js中获取设备顶部窗口的高度

App({onLaunch: function (options) {var _this = this;//自定义导航栏 获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）wx.getSystemInfo({success: (res) => {// 基础库 2.1.0 开始支持wx.getMenuButtonBoundingClientRect()，低版本需要适配let custom = wx.getMenuButtonBoundingClientRect()_this.globalData.statusBarHeight = res.statusBarHeight_this.globalData.navBarHeight = custom.height + (custom.top - res.statusBarHeight) * 2}})},globalData: { // 全局数据statusBarHeight: 0,navBarHeight: 0},
})

3. 创建navbar组件

• wxml文件中

<view class='nav-wrap nav-bgc-class' style='height: {{statusBarHeight + navBarHeight}}px;'><!--  左上角的返回按钮 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，1为显示，0为隐藏 --><view class='nav-capsule' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;' wx:if='{{navbarData.showCapsule}}' bindtap='_navback'><image class='back-pre ex-back-pre' src='{{navbarData.backSrc || "/assets/arrow.png"}}' mode='aspectFill'></image></view><!--  中间的标题 --><view class='nav-title nav-title-class' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;' wx:if='{{navbarData.title&&!navbarData.titleHide}}'>{{navbarData.title}}</view><view class='nav-title nav-title-class' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;' wx:if="{{!navbarData.titleHide&&!navbarData.title}}"><image src="/assets/logo.png" alt="" class="nav-logo"/></view>
</view>

• js文件中

const app = getApp()
Component({// multipleSlots 为组件开启多插槽模式options: {multipleSlots: true,},// properties 组件用来储存外部数据properties: {navbarData: { //navbarData   由父页面传递的数据，变量名字自命名type: Object,value: {},observer: function (newVal, oldVal) {}},},// 组件用来储存内部私有数据data: {// 自定义导航栏的高度statusBarHeight: app.globalData.statusBarHeight,navBarHeight: app.globalData.navBarHeight},// attached函数 当组件进入页面节点树时触发，可以使用setData，绝大多数初始化工作在这个时机进行attached: function () {},methods: {// 返回键，触发自定义事件，将返回的事件交给父级页面来分情况定义_navback() {this.triggerEvent('goBack')}}
})

• json文件

{"usingComponents": {},"component": true
}

• wxss文件

/* 顶部固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {position: fixed;width: 100%;top: 0;left: 0;right: 0;background: #F0F0F0;z-index: 9999;transform: translate3d(0, 0, 0);
}/* 返回键 */
.nav-capsule {width: 140rpx;display: flex;align-items: center;position: absolute;left: 20rpx;top: 0;bottom: 0;margin: auto;
}.back-pre {width: 40rpx;height: 40rpx;
}/* 标题 */
.nav-title {position: absolute;left: 0;right: 0;bottom: 0;max-width: 360rpx;margin: auto;display: flex;align-items: center;justify-content: space-around;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #45494D;font-size: 24rpx;font-weight: 600;
}
.nav-title .nav-logo {width: 99rpx;height: 41rpx;
}

4. 页面引用

• wxml文件

<view>
<nav-bar bind:goBack="_goBack" navbar-data='{{nvabarData}}'></nav-bar>
</view>

• js文件

import {request
} from '../../utils/request'
const app = getApp()
let pageIndex = 1
Page({/*** 页面的初始数据*/data: {nvabarData: {showCapsule: 1,//是否显示左上角图标   1表示显示    0表示不显示title: '首页',backSrc:'' //如果传入左上角使用传入的图片否则使用返回图标},},_goBack() {let pages = getCurrentPages(); //获取当前页面pages里的所有信息。console.log(pages, "pages")let prevPage = pages[pages.length - 2]; //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。prevPage.setData({ // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。chooseValue: this.data.chooseValue})//上一个页面内执行setData操作，将我们想要的信息保存住。当我们返回去的时候，页面已经处理完毕。//最后就是返回上一个页面。wx.navigateBack({delta: 1 // 返回上一级页面。})}}