大部分情况下我们都是使用微信官方自带的 navigationBar 配置，但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。

思路

隐藏官方导航栏
获取胶囊按钮、状态栏相关数据以供后续计算
根据不同机型计算导航栏高度
编写新的导航栏
页面引用自定义导航

一、隐藏官方导航栏

隐藏导航栏可以全局配置，也可以单独页面配置，具体根据业务需求来。

{"path" : "pages/public/login","style": {"navigationBarTitleText": "","navigationStyle": "custom","app-plus": {"titleNView": false}}
}

二、计算相关值

因为在不同的手机型号头部那条栏目高度可能不一致，所以为了我们适配更多型号，我们需要计算3个值：

如下图：

整个导航栏的高度；
胶囊按钮与顶部的距离；
胶囊按钮与右侧的距离。

小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息和 wx.getSystemInfo() 获取设备信息。

如下图：

通过这些信息我们可以计算出上面说的3个值：

1、整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )2；
注：状态栏到胶囊的间距 = 胶囊到下边界距离。所以这里需要2
(或：导航栏高度 = bottom + ( top- statausBarHeight ) )

2、胶囊按钮与顶部的距离 = top；

3、胶囊按钮与右侧的距离 = windowWidth - right。

关于第1步中，为啥要乘以2的原因，请看灵魂画手般的我画的图纸：

实例

app.js设置

一般情况下，我们需要在运用启动的初始化生命周期钩子进行计算相关的数据，也就是入口文件 app.js 的 onLaunch 生命周期钩子
App.js 代码如下：

// app.js
App({globalData: {},onLaunch() {this.setNavBarInfo();},setNavBarInfo(){let menuButtonObject = wx.getMenuButtonBoundingClientRect();wx.getSystemInfo({success: res => {let statusBarHeight = res.statusBarHeight,navTop = menuButtonObject.top,//胶囊按钮与顶部的距离navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;//导航高度this.globalData.navHeight = navHeight;this.globalData.navTop = navTop;this.globalData.windowHeight = res.windowHeight;},fail(err) {console.log(err);}})}
})

组件封装

因为这个头部导航是公共的，所以我们最好把它设置成一个组件，命名为navbar

index.wxml

<view class="navbar custom-class" style='height:{{navHeight}}px;background-color:{{bgColor}}'><view wx:if="{{showNav}}" class="navbar-action-wrap navbar-action-group row item-center" style='top:{{navTop}}px;background-color:rgba(255,255,255,.6)'><ss-icon name="back" color="{{iconColor}}" size="15px" block="{{true}}" class="navbar-action_item" bind:click="_navBack"></ss-icon><ss-icon name="index" color="{{iconColor}}" size="15px" block="{{true}}" class="navbar-action_item last" bind:click="_toIndex"></ss-icon></view><view class='navbar-title' style="top:{{navTop}}px; {{ textColor ? 'color: ' + textColor : '' }}">{{pageName}}</view>
</view>

index.js

// components/navbar/index.js
const App = getApp();Component({options: {addGlobalClass: true,},/*** 组件的属性列表*/properties: {pageName:String,bgColor:{type:String},iconColor:{type:String,value:"#000"},textColor:{type:String,value:"#000"},showNav:{type:Boolean,value:true},showHome: {type: Boolean,value: true}},/*** 组件的初始数据*/data: {navTop:App.globalData.navTop,navHeight: App.globalData.navHeight},lifetimes: {attached: function () {this.setData({navH: App.globalData.navHeight})}},/*** 组件的方法列表*/methods: {//回退navBack: function () {wx.navigateBack({delta: 1})      },//回主页toIndex: function () {wx.navigateTo({url: '/pages/admin/home/index/index'})},}
})

index.wxss

/* components/navbar/index.wxss */
.navbar {width: 100%;overflow: hidden;position: relative;top: 0;left: 0;z-index: 10;flex-shrink: 0;
}.navbar-title {width: 100%;box-sizing: border-box;padding-left: 115px;padding-right: 115px;height: 32px;line-height: 32px;text-align: center;position: absolute;left: 0;z-index: 10;color: #333;font-size: 16px;font-weight: bold;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}.navbar-action-wrap {display: -webkit-flex;display: flex;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;position: absolute;left: 10px;z-index: 11;line-height: 1;padding-top: 4px;padding-bottom: 4px;
}.navbar-action-group {border: 1px solid #f0f0f0;border-radius: 20px;overflow: hidden;
}.navbar-action_item {padding: 3px 0;color: #333;
}.navbar-action-group .navbar-action_item {border-right: 1px solid #f0f0f0;padding: 3px 14px;
}.navbar-action-group .last {border-right: none;
}

index.json:

{"component": true,"usingComponents": {"ss-icon": "../icon/index"}
}

ss-icon 是我自定义的一个 icon 组件，点击查看。如果你没有这个组件，可以在我使用的地方换成组件，然后里面放入你的图标就可以了。

对于组件不太明白的，可以看下微信小程序组件相关组件的介绍。

组件已创建完毕，现在说下该组件的使用方法：

组件使用

假设我们需要在index.wxml中需要调用这个组件，
1.在index.json中引用该组件：

{"usingComponents": {"navbar": "/components/navbar/index"}
}

2.在index.wxml中使用该组件：

<view class='view-page'><navbar page-name="测试" bg-color="#1c92ee" icon-color="#fff" text-color="#fff" show-nav="{{true}}"></navbar><view class='page-content'><!--这里放你的内容--></view>
</view>

最后的结果如下图所示：

3.参数说明

参数	说明	类型	默认值
page-name	当前页面名称	String	–
show-nav	是否显示左侧图标按钮	Boolean	true
bg-color	导航背景颜色	String	#fff
icon-color	左侧图标颜色	String	#000
text-color	当前页面名称颜色	String	#000

完整代码git地址:微信小程序-自定义导航栏

参考

微信小程序——自定义导航栏
【微信小程序】自定义导航栏（二）

【微信小程序】自定义导航栏相关推荐

微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信小程序自定义导航栏 navigation bar 返回键首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件版本号:2.0.0 作者:chen-yt github: https://g ...
微信小程序自定义导航栏如何实现（简洁版）~内附代码
先来张效果图实现起来也是十分容易的,几行代码. Page({data: {},onLoad() {// 获取设备的信息let menuButtonObject = wx.getMenuButtonB ...
微信小程序-自定义导航栏
微信小程序-自定义导航栏第一步添加属性 "navigationStyle": "custom" 第二步自定义导航栏第二步自定义组件第四步使用组件 ...
微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中页面的 title 只支持纯文本级别的样式控 ...
微信小程序-自定义导航栏及返回上一级页面的实现
一.参考文章 1.微信小程序自定义navigationBar 2.微信小程序返回上一级页面的实现代码 3.小程序开发--常用布局二.需求在导航栏中需要显示信息的"未读数量",所 ...

【微信小程序】自定义导航栏