头部导航组件有一个小房子和一个返回按钮。可以设置背景颜色、标题文本颜色、胶囊背景颜色和边框颜色。headerNabvar.jsconstapp=getApp();Component({properties:{navbarData:{//navbarData是父页面传过来的数据type:Object,value:{},observer:function(newVal,oldVal){}}},data:{haveBack:true,//是否有返回按钮,trueorfalse,no如果从分享页面进入,没有返回按钮statusBarHeight:0,//状态栏高度navbarHeight:0,//topnavigationbarheightnavbarBtn:{//胶囊位置信息height:0,width:0,top:0,bottom:0,right:0}},//微信7.0.0支持wx.getMenuButtonBoundingClientRect()获取高度附加的胶囊按钮：function(){letstatusBarHeight=app.globalData.systeminfo.statusBarHeight//状态栏高度letheaderPosi=app.globalData.headerBtnPosi//胶囊位置信息/***wx.getMenuButtonBoundingClientRect()坐标信息取以屏幕左上角为原点*菜单按钮宽度：87*菜单按钮高度：32*菜单按钮左边框坐标：278*菜单按钮上边框坐标：26*菜单按钮右边框坐标：365*菜单按钮下边框坐标：58*/letbtnPosi={//胶囊的实际位置，坐标信息不是左上角高度的原点：headerPosi.height||32、宽度：headerPosi.width||87,top:(headerPosi.top||26)-statusBarHeight,//capsuletop-状态栏高度bottom:(headerPosi.bottom||58)-(headerPosi.height||32)-statusBarHeight,//capsulebottom-capsuleheight-状态栏高度（capsule的实际底部是距离导航栏底部的长度）right:app.globalData.systeminfo.screenWidth-(headerPosi.right||365)//screenwidth-capsuleright}让我们回来；if(getCurrentPages().length===1){//当只有一页时，从共享页面进入haveBack=false;}else{haveBack=true;}this.setData({haveBack:haveBack,//获取小程序是否通过分享进入//haveBack:true,statusBarHeight:statusBarHeight,navbarHeight:(headerPosi.bottom||58)+btnPosi.bottom,//capsulebottom+capsule真实的底部navbarBtn:btnPosi})},方法:{_goBack:function(event){wx.navigateBack({delta:1,success(){}});},_goHome:function(event){wx.reLaunch({url:'/pages/index/index'})}}})headerNabvar.json{"component":true,"usingComponents":{}}headerNabvar.wxml
