小程序日常-自定义组件之头部导航组件

头部导航组件

带有小房子和返回键，背景色可设置，标题文字颜色可设置，胶囊背景色可设置，边框颜色可设置，算一个比较全面的，目前正实际应用这~可做参考~

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;
}