原文：地址
不是我自己写的，我就不多说了 直接上代码
-
要用自定义的导航栏只需要在app.json中配置
"navigationStyle": "custom"
- app.js 文件
//app.js
App({
onLaunch: function (options) {
// 判断是否由分享进入小程序
if (options.scene == 1007 || options.scene == 1008) {
this.globalData.share = true
} else {
this.globalData.share = false
};
//获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
//这个最初我是在组件中获取，但是出现了一个问题，当第一次进入小程序时导航栏会把
//页面内容盖住一部分,当打开调试重新进入时就没有问题，这个问题弄得我是莫名其妙
//虽然最后解决了，但是花费了不少时间
wx.getSystemInfo({
success: (res) => {
this.globalData.height = res.statusBarHeight
}
})
},
globalData: {
share: false, // 分享默认为false
height: 0,
}
})- 组件目录：
- index.wxml文件：
<view class='nav-wrap' style='height: {
{height*2 + 20}}px;'>
// 导航栏 中间的标题
<view class='nav-title' style='line-height: {
{height*2 + 44}}px;'>{
{navbarData.title}}</view>
<view style='display: flex; justify-content: space-around;flex-direction: column'>
// 导航栏 左上角的返回按钮 和home按钮
// 其中wx:if='{
{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，首页不显示
<view class='nav-capsule' style='height: {
{height*2 + 44}}px;' wx:if='{
{navbarData.showCapsule}}'>
//左上角的返回按钮，wx:if='{
{!share}}'空制返回按钮显示
//从分享进入小程序时 返回上一级按钮不应该存在
<view bindtap='_navback' wx:if='{
{!share}}'>
<image src='/imgs/back-pre.png' mode='aspectFill' class='back-pre'></image>
</view>
<view class='navbar-v-line' wx:if='{
{!share}}'></view>
<view bindtap='_backhome'>
<image src='/imgs/back-home.png' mode='aspectFill' class='back-home'></image>
</view>
</view>
</view>
</view>- index.wxss文件：
/* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
background: #fff;
color: #000;
z-index: 9999999;
}
/* 标题要居中 */
.nav-title {
position: absolute;
text-align: center;
max-width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-size: 36rpx;
color: #2c2b2b;
font-weight: 600;
}
.nav-capsule {
display: flex;
align-items: center;
margin-left: 30rpx;
width: 140rpx;
justify-content: space-between;
height: 100%;
}
.navbar-v-line {
width: 1px;
height: 32rpx;
background-color: #e5e5e5;
}
.back-pre, .back-home {
width: 32rpx;
height: 36rpx;
margin-top: 4rpx;
padding: 10rpx;
}
.nav-capsule .back-home {
width: 36rpx;
height: 40rpx;
margin-top: 3rpx;
}
index.json文件（自定义组件必须）：
{
"component": true
}
index.js文件：
const app = getApp()
Component({
properties: {
navbarData: { //navbarData 由父页面传递的数据，变量名字自命名
type: Object,
value: {},
observer: function (newVal, oldVal) {}
}
},
data: {
height: '',
//默认值 默认显示左上角
navbarData: {
showCapsule: 1
}
},
attached: function () {
// 获取是否是通过分享进入的小程序
this.setData({
share: app.globalData.share
})
// 定义导航栏的高度 方便对齐
this.setData({
height: app.globalData.height
})
},
methods: {
// 返回上一页面
_navback() {
wx.navigateBack()
},
//返回到首页
_backhome() {
wx.switchTab({
url: '/pages/index/index',
})
}
}
}) app.js 文件：
//app.js
App({
onLaunch: function (options) {
// 判断是否由分享进入小程序
if (options.scene == 1007 || options.scene == 1008) {
this.globalData.share = true
} else {
this.globalData.share = false
};
//获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
//这个最初我是在组件中获取，但是出现了一个问题，当第一次进入小程序时导航栏会把
//页面内容盖住一部分,当打开调试重新进入时就没有问题，这个问题弄得我是莫名其妙
//虽然最后解决了，但是花费了不少时间
wx.getSystemInfo({
success: (res) => {
this.globalData.height = res.statusBarHeight
}
})
},
globalData: {
share: false, // 分享默认为false
height: 0,
}
})如何使用自定义导航栏：
文件目录图
文件目录图
在微信小程序页面中：
pages文件夹index.wxml文件：
// 引入自定义组价。'navbar-data'中navbar是自定义名字，决定了组件中'navbarData'的名字
<nav-bar navbar-data='{
{navbarData}}'></nav-bar>
<view class='home-page' style='margin-top: {
{height}}px'>
home page
</view>
pages文件夹index.json文件中(声明使用的组件，和组件的地址)：
{
"usingComponents": {
"nav-bar": "/commpents/navbar/index"
}
}pages文件夹index.js文件：
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
// 组件所需的参数
navbarData: {
showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示
title: '我的主页', //导航栏 中间的标题
},
// 此页面 页面内容距最顶部的距离
height: app.globalData.height * 2 + 20 ,
},
onLoad() {
console.log(this.data.height)
}
})
pages文件夹index.wxss文件：
/**index.wxss**/
.home-page {
height: 160rpx;
width: 100%;
border: 1rpx solid red;
font-size: 60rpx;
}