头部导航组件
带有小房子和返回键，背景色可设置，标题文字颜色可设置，胶囊背景色可设置，边框颜色可设置，算一个比较全面的，目前正实际应用这~可做参考~
headerNabvar.js
const app = getApp();Component({ properties: { navbarData: { // navbarData 由父页面传递的数据 type: Object, value: {}, observer: function (newVal, oldVal) { } } }, data: { haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则没有返回按钮 statusBarHeight: 0, // 状态栏高度 navbarHeight: 0, // 顶部导航栏高度 navbarBtn: { // 胶囊位置信息 height: 0, width: 0, top: 0, bottom: 0, right: 0 } }, // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度 attached: function () { let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度 let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息 /** * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点 * 菜单按键宽度： 87 * 菜单按键高度： 32 * 菜单按键左边界坐标： 278 * 菜单按键上边界坐标： 26 * 菜单按键右边界坐标： 365 * 菜单按键下边界坐标： 58 */ let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点 height: headerPosi.height || 32, width: headerPosi.width || 87, top: (headerPosi.top || 26) - statusBarHeight , // 胶囊top - 状态栏高度 bottom: (headerPosi.bottom || 58) - (headerPosi.height || 32) - statusBarHeight , // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度） right: app.globalData.systeminfo.screenWidth - (headerPosi.right || 365) // 屏幕宽度 - 胶囊right } let haveBack; if (getCurrentPages().length === 1) { // 当只有一个页面时，并且是从分享页进入 haveBack = false; } else { haveBack = true; } this.setData({ haveBack: haveBack, // 获取是否是通过分享进入的小程序 // haveBack: true, statusBarHeight: statusBarHeight, navbarHeight: (headerPosi.bottom || 58) + btnPosi.bottom, // 胶囊bottom + 胶囊实际bottom navbarBtn: btnPosi }) }, methods: { _goBack: function (event) { wx.navigateBack({ delta: 1, success() { } }); }, _goHome: function (event) { wx.reLaunch({ url: '/pages/index/index' }) } }})headerNabvar.json
{ "component": true, "usingComponents": {}}headerNabvar.wxml
<!-- 因为安卓机对cover-view有兼容问题故改回view 不要在安卓机上使用cover-view 返回 --><view class\='navbar-wrap'style\='height:{{navbarHeight}}px;padding-top:{{statusBarHeight}}px;background:{{navbarData.bgColor ? navbarData.bgColor : "#fff"}}'\><view class\="navbar-text"style\='line-height:{{navbarBtn.height + navbarBtn.top}}px;color:{{navbarData.textColor ? navbarData.textColor : "#333"}};'\>{{navbarData.title ? navbarData.title : "默认标题"}}</view\><view class\="navbar-icon" wx:if\='{{navbarData.showCapsule ? navbarData.showCapsule : true}}'style\="top:{{navbarBtn.top + statusBarHeight}}px;left:{{navbarBtn.right}}px;height:{{navbarBtn.height}}px;background:{{navbarData.btnBgColor ? navbarData.btnBgColor : '#fff'}};border-color:{{navbarData.borderColor ? navbarData.borderColor : 'rgba(0,0,0,0.3)'}}"\><image wx:if\='{{haveBack}}' data-id\="{{navbarData.parentId}}" bindtap\="\_goBack" class\="floatL haveback"src\="../headerNavbar/img/navbar\_back\_{{navbarData.iconColor ? navbarData.iconColor : 'black'}}.png"\></image\><view wx:if\='{{haveBack}}' class\="floatL"style\="border-color:{{navbarData.borderColor ? navbarData.borderColor : 'rgba(0,0,0,0.3)'}}"\></view\><image bindtap\="\_goHome" class\="homeimage" data-id\="{{navbarData.parentId}}"src\="../headerNavbar/img/navbar\_home\_{{navbarData.iconColor ? navbarData.iconColor : 'black'}}.png"\></image\></view\></view\><view class\="navbar-loading" style\='height:{{navbarHeight}}px;line-height:{{navbarHeight}}px;'\></view\>headerNavbar.wxss
.navbar-wrap{ position: fixed; width: 100%; top: 0; z-index: 9999999; background-color: #3281FF; box-sizing: border-box;}.navbar-text { text-align: center; font-size: 32rpx; color: #333333; font-weight: 600;}.navbar-icon { position: fixed; display: flex; border-radius: 64rpx; border: 1rpx solid rgba(222,222,222,1); box-sizing: border-box;}.navbar-icon .homeimage { height: 36rpx; width: 42rpx; padding: 12rpx 26rpx 12rpx; display: inline-block; overflow: hidden;}.navbar-icon view { height: 36rpx; border-left: 1rpx solid rgba(222,222,222,1); margin-top: 12rpx;}.navbar-loading{ /* background:#fff; */ text-align:center;}.haveback{ width: 18rpx; height:34rpx; padding: 12rpx 26rpx 12rpx; display: inline-block; overflow: hidden;}