项目代码：https://github.com/Shay0921/header-navbar.git
在小程序中，从转发出来的小程序消息卡片进入，因为页面栈中只有一个，所以不会出现返回按钮，对于一些电商平台来说，当商品被转发后会很影响客户查看其它产品和首页，这时候就需要使用自定义导航栏自己写一个“胶囊按钮”。如下图所示：
从别的页面点到商品页时会有返回和首页按钮；
当从分享页进入到商品页时，因为页面栈只有一个，所以只有首页按钮；
首先我们需要如何开启自定义导航栏，查看手册后会发现一个页面配置项： navigationStyle
之前的版本此配置项只能在app.js中配置，是全局的属性，而现在可以在单独的页面json中配置，实现单独页面自定义导航栏。
整体思路
当使用了 navigationStyle:custom 后，之前的顶部标题栏会被删除，右侧的胶囊按钮则会固定在右上角。然后在当前页面添加了三个view(状态栏、标题栏、主体内容)，可以看出三块的布局，我直接写死的高度：状态栏20px，标题栏44px。这个是自定义导航栏的关键，需要去计算这两块的高度，还有返回|首页胶囊按钮的位置。基础库 2.1.0开始可以使用 wx.getMenuButtonBoundingClientRect() 来获得 右侧胶囊按钮的位置信息 ，而有了这个信息，就能相对的算出我们想要在左侧添加的胶囊按钮的位置。通过 wx.getSystemInfoSync()中的statusBarHeight找到状态栏的高度 。
目录结构
├── components 组件 │ ├── headerNavbar 顶部自定义导航栏 │ │ └── headerNavbar.js │ │ └── headerNavbar.json │ │ └── headerNavbar.wxml │ │ └── headerNavbar.wxss ├── pages 页面 │ ├── index 首页 │ │ └── index.js │ │ └── index.json │ │ └── index.wxml │ │ └── index.wxss │ ├── navigationStyle 引入自定义导航栏的页面(单独配置了navigationStyle) │ │ └── navigationStyle.js │ │ └── navigationStyle.json │ │ └── navigationStyle.wxml │ │ └── navigationStyle.wxss │ │ └── testPage.js 路由测试页面(后面用来测试跳转显示不同胶囊按钮) │ │ └── testPage.json │ │ └── testPage.wxml │ │ └── testPage.wxss
全局变量
app.js
在app.js中要先获得状态栏高度和右侧胶囊位置信息
App({ onLaunch: function (options) { // 这里省略掉了登录和获取用户信息等函数 // 因为我在别的页面也需要使用此信息，所以没有单独获得 statusBarHeight wx.getSystemInfo({ // 获取设备信息 success: (res) => { this.globalData.systeminfo = res }, }) // 获得胶囊按钮位置信息 this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect() }, globalData: { systeminfo: {}, // 系统信息 headerBtnPosi: {} // 胶囊按钮位置信息 } })
这里需要注意wx.getMenuButtonBoundingClientRect()，并不是像wx.getSystmInfo一样有success回调函数，而是像对象一样 wx.getMenuButtonBoundingClientRect().height 来使用。
组件代码
headerNavbar.wxml
<!-- 自定义导航栏 --> <view> <view> {{navbarData.title ? navbarData.title : "默认标题"}}{{navbarHeight}} </view> <view wx:if='{{navbarData.showCapsule ? navbarData.showCapsule : true}}'> <image wx:if='{{haveBack}}' bindtap="_goBack" src="https://www.jb51.net/img/navbar_back_white.png"></image> <view wx:if='{{haveBack}}'></view> <image bindtap="_goHome" src="https://www.jb51.net/img/navbar_home_white.png"></image> </view> </view> <!-- 手写loading --> <view> <text>...</text> </view>
为了适配不同手机屏幕， 高度和胶囊按钮的位置都需要在html里面赋值 ，下面会详细的说明高度如何计算。在自定义导航栏组件中分为两部分， 一个是顶部的导航栏另一个是自己写的loading。
因为自定义导航栏是fixed到顶部的， 为了保证不挡住下面的主体内容，我们需要在导航栏和主体内容之间添加一个跟导航栏相同的高度 ，class先叫做box。这样可以保证导航栏不挡着主体内容。但是会出现另一个问题，如果此页面支持下拉刷新， 那么导航栏会把小程序原生的loading样式挡住，而在主体内容的前面会出现一个空白的box，虽说不影响使用，但是在用户看来会很奇怪，莫名其妙的多出来一块，box只有在loading结束后才会上去 。所以在这里需要自己手写一个loading的动画效果放在组件的最底下，高度跟导航栏一样。
可以看到下面的最终效果，蓝色导航条下面的三个点是小程序原生loading，再下面三个小点是自己写的loading。
而我们想要的效果则是，当小程序原生的loading被当时，自己写的loading就可以替代原生的loading
headerNavbar.js
状态栏高度 = app.globalData.systeminfo.statusBarHeight
需要注意 胶囊位置信息的原点是在页面的左上角 ，所以需要转换一下，把 原胶囊位置信息起名为胶囊，转换后的叫做现胶囊。