效果图
首先要先在 json文件里加上"navigationStyle":"custom", 这句，去掉原生的自定义导航栏
一、子组件-wxml
<view style="height:{{statusHeight+navHeight}}px" hidden="{{header.hiddenBlock}}"></view><view class="topbar" style="background:{{header.headerbg}}"><view class="status" style="height:{{statusHeight}}px;"></view><view class="navbar" style="height:{{navHeight}}px;"><block wx:if="{{header.slot}}"><slot></slot></block><block wx:else><view class="navbar_home" wx:if="{{header.homeCapsule}}"style="background: {{header.capsulebg}};border:{{header.capsuleborder}}"><image src="../../assets/images/goback-arrow.png" bindtap="backClick"style="border-right:{{header.capsulesep}}" /><image src="../../assets/images/goindex-arrow.png" bindtap="homeClick" /></view><view class="navbar_back" bindtap="backClick" wx:else><image src="../../assets/images/goback-arrow.png"></image></view><view class="navbar_title" style="height:{{navHeight}}px"><view style="color:{{header.fontColor}};font-size:{{header.fontSize}}">{{header.title}}</view></view></block></view></view>
二、子组件-js
/* eslint-disable no-lonely-if */// components/navbar.jsComponent({/*** 组件的属性列表*/properties: {header: {type: Object,value: {homeCapsule: false,headerbg: '#fff',title: '',fontColor: '#000',fontSize: '16px',hiddenBlock: false,capsulebg: 'rgba(0,0,0,0.2)',capsuleborder: '1px solid rgba(0,0,0,0.1)',capsulesep: '1px solid rgba(255,255,255,0.2)',slot: false}},/*** 自定义返回事件处理* customBackReturn="{{true}}" bind:customBackReturn="customBackReturn"*/customBackReturn: {type: Boolean,value: false}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {backClick() {if (this.data.customBackReturn) {this.triggerEvent('customBackReturn')} else {// getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面// 注意：不要尝试修改页面栈，会导致路由以及页面状态错误if (getCurrentPages().length === 1) {wx.navigateTo({url: '/pages/index/index'})} else {wx.navigateBack({delta: 1})}}},homeClick() {// wx.navigateTo({// url: '/pages/index/index'// })wx.navigateBack({delta: 1})}},// attached 在组件实例进入页面节点树时执行attached() {const self = thiswx.getSystemInfo({success(res) {const isIos = res.system.indexOf('iOS') > -1self.setData({statusHeight: res.statusBarHeight,navHeight: isIos ? 44 : 48})}})}})
三、子组件-css
.topbar {position: fixed;left: 0;top: 0;width: 100%;z-index: 9999;}.status {width: 100%;}.navbar {width: 100%;display: flex;justify-content: flex-start;align-items: center;position: relative;}.navbar_back {padding: 0 32rpx;display: flex;justify-content: flex-start;align-items: center;height: 100%;}.navbar_back image {width: 21rpx;height: 34rpx;}.navbar_title {position: absolute;left: 0;top: 0;width: 100%;text-align: center;display: flex;justify-content: center;align-items: center;z-index: -1;}.navbar_title view {width: 40%;word-break: break-all;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 38rpx;}.navbar_home {padding: 10px 0;margin-left: 32rpx;display: flex;justify-content: flex-start;align-items: center;border-radius: 40rpx;border: 1px solid rgba(0, 0, 0, 0.1);background: rgba(0, 0, 0, 0.2);}.navbar_home image:first-child {width: 21rpx;height: 34rpx;padding: 0 32rpx;border-right: 1px solid rgba(255, 255, 255, 0.2);}.navbar_home image:last-child {width: 37rpx;height: 35rpx;padding: 0 32rpx;}
四、父组件-wxml
<view><yx-navbar header="{{header}}"></yx-navbar><image class="" style="width:100%" src="../../assets/images/pikaqiu.png" lazy-load="false" binderror=""bindload=""></image><view>内容区域</view></view>
五、父组件-js ，记得json文件里先引入组件，这样就完成啦
Page({data: {header: {homeCapsule: true,title: '标题',fontSize: '36rpx',headerbg: '#f40',hiddenBlock: false,slot: false}},onLoad() {}})
原文链接：微信小程序自定义导航栏组件 - 掘金
