小程序自定义头部navbar组件

首先先编写导航栏组件

1你要自定义导航栏首先你要知道导航栏的高度，导航栏由状态栏和胶囊按钮构成
通过Object wx.getMenuButtonBoundingClientRect()可以拿到胶囊按钮的信息，通过wx.getSystemInfo可以拿导航栏信息

整个导航栏高度 = statusBarHeight + height + (top-statusBarHeight )*2；

直接分成导航栏和nav栏两块

直接上代码，代码里面有注释

.wxml

 1 <view class="share-reward-header" style="height: {{navBarSpaceHeight}}px" style="background-color: {{backgroundColor}}">
 2   <view class="navbar" >
 3     <view style="height:{{statusBarHeight}}px" />
 4     <view style="height:{{navigateContentHeight}}px;}}" class="navbar-content">
 5         <view class="go-back" style="height:{{navigateContentHeight}}px;" wx:if="{{!hideBack}}">
 6           <navigator open-type="switchTab" class="go-back-navigate" hover-class="none" url="{{url}}">
 7             <image src="../../images/go-back.png"></image>
 8           </navigator>
 9         </view>
10         <text class="navbar-title" style="max-{{navigateTitleMaxWidth}}px;">{{title}}</text>
11     </view>
12   </view>
13 </view>
14 <view style="height: {{navBarSpaceHeight}}px;100%;"></view> //占位块

.wxss

 1 .share-reward-header{
 2    100%;
 3   position: fixed;
 4   z-index: 9999;
 5 }
 6 .share-reward-header .navbar {
 7   /* background-color: #FF650C; */
 8   position: relative;
 9 }
10 .share-reward-header .navbar-content {
11   display: flex;
12   align-items: center;
13   justify-content: center;
14   position: relative;
15 }
16 .share-reward-header .go-back{
17   position: absolute;
18   left:0;
19   top:0;
20   display: flex;
21   justify-content: center;
22   align-items: center;
23   box-sizing: border-box;
24   z-index:1000;
25 }
26 .share-reward-header .go-back .go-back-navigate{
27   display: flex;
28   justify-content: center;
29   align-items: center;
30   box-sizing: content-box;
31   20rpx;
32   height:100%;
33   padding:0 10rpx 0 26rpx;
34 }
35 .share-reward-header .go-back image{
36   display: block;
37   20rpx;
38   height:37rpx;
39 }
40 .share-reward-header .navbar-title {
41   text-align: center;
42   white-space: nowrap;
43   overflow: hidden;
44   text-overflow: ellipsis;
45   font-size: 30rpx;
46   font-weight: bold;
47   z-index:999;
48   color: #ffffff;
49   max- 350rpx;
50 }

.js

import { IApp } from '../../../app'

const app = getApp<IApp>();

Component({

properties:{

title:{

type:String,

value:''

}, //标题

url:{

type:String,

value:""

}, //返回键跳转地址

hideBack:{

type:Boolean,

value:false

}, //是否显示返回键

backgroundColor:{

type:String,

value:"#FF7700"

} //背景色

data:{

statusBarHeight:20,

navigateTitleMaxWidth:0,

fontSizeSetting:0,

navigateContentHeight:0,

navBarSpaceHeight:0

attached:function(){

const headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息

let navigateTitleMaxWidth = 0

const statusBarHeight = app.globalData.systemInfo.statusBarHeight // 状态栏高度

navigateTitleMaxWidth = app.globalData.systemInfo.windowWidth - (app.globalData.systemInfo.windowWidth - headerPosi.left + 15) * 2

this.setData({

statusBarHeight: statusBarHeight,

navigateContentHeight: (headerPosi.top - statusBarHeight) * 2 + headerPosi.height,

navigateTitleMaxWidth:navigateTitleMaxWidth

},()=>{

this.setData({

navBarSpaceHeight:this.data.statusBarHeight+this.data.navigateContentHeight

})

methods:{

}

})

//你看到app.globalData.某某可能有点懵，这里我在app.js里面做了全局变量处理，一次定义全局使用

this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()

wx.getSystemInfo({

success: function (res) {

this.globalData.systemInfo = res

}

})

{
    "component": true
}

.json 里面一定要加上面这个

由于全局只用直接在app.json里面配置的时候注册

使用如下

不需要返回键
<tabbar title="标题" hideBack="true"></tabbar>

然后就结束了