小程序自定義頭部導航欄

首先先編寫導航欄組件

1你要自定義導航欄首先你要知道導航欄的高度，導航欄由狀態欄和膠囊按鈕構成
通過 Object wx.getMenuButtonBoundingClientRect()可以拿到膠囊按鈕的信息，通過wx.getSystemInfo可以拿導航欄信息

 

整個導航欄高度 = statusBarHeight + height + (top-statusBarHeight )*2；

還有一種寫法是狀態欄加上44px當做導航欄的高度

 直接上代碼，代碼里面有注釋

.wxml

<view class="tabbar" style="height:{{statusBarHeight+44}}px;padding-top:{{statusBarHeight}}px;font-size:{{fontSizeSetting}}px">
  <view class="back" wx:if="{{!hideBack}}" style="height:{{statusBarHeight+44}}px;padding-top:{{statusBarHeight}}px;">
    <navigator hover-class="none" url="{{url}}" open-type="reLaunch">
      <image src="../../images/back.png"></image>
    </navigator>
  </view>
  <view class="title">{{title}}</view>
</view>
<view style="height:{{statusBarHeight+44}}px"></view>

//.wxss
page{
    height:auto;
}
.tabbar{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    background:#fff;
    position:fixed;
    z-index:9999;
}

.tabbar .back{
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.tabbar image{
    width: 60rpx;
    height: 60rpx;
    vertical-align: middle;
  }
.tabbar .title{
    box-sizing: border-box;
    padding-left: 115px;
    padding-right: 115px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.js
Component({//自定義組件
    //定義屬性
    properties:{//首先頭部我主要是控制title提示和返回鍵所以我只要定義3個屬性，1title2是否顯示返回3返回的地址是什么就可以了
        title:{
            type:String,
            value:''
        },
        hideBack:{
            type:Boolean,
            value:false
        },
        url:{
            type:String,
            value:''
        }
    },
    data:{//私有數據  //你要自定義導航欄首先你要知道狀態欄的高度
        statusBarHeight:'',
        fontSizeSetting:''
    },
    // 生命周期函數，可以為函數，或一個在methods段中定義的方法名
    attached: function () { 
        this.getSystem();
    }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
    methods:{
        getSystem(){
            var That=this;
            wx.getSystemInfo({
                success(res){
                    console.log("d",res);
                    That.setData({
                        statusBarHeight:res.statusBarHeight,
                        fontSizeSetting:res.fontSizeSetting
                    })
                }
            })
        }
    }
})

{
    "component": true
}

.json 里面一定要加上面這個

由於全局只用直接在app.json里面配置的時候注冊

 

 

 使用如下

<tabbar title="正在加載中..." hideBack="true"></tabbar> 這是不要返回的

<tabbar title="標題" url="跳轉地址"></tabbar>

 

然后就結束了