微信头部导航栏可能通过json配置：

 

但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示：

 

现在具体说一下实现步骤及方法：

步骤：

1.在 app.json 里面把 "navigationStyle" 设置为 "custom"

这样子之后就只会保留右上角胶囊按钮了。

 

2.在app.js中通过wx.getSystemInfo()获取头部导航条的高度，因为在不同的手机型号头部那条栏目高度可能不一致。

App({    onLaunch: function () {      wx.getSystemInfo({        success: res => {          //导航高度          this.globalData.navHeight = res.statusBarHeight + 46;        }, fail(err) {          console.log(err);        }      })    }})

 

3.因为这个头部导航是公共的，所以我们最好把它设置成一个组件，命名为navbar

 

index.wxml:

     
       
          
           
            
            
           
       
            
             
        
      
           {
    {pageName}}  
      
     

 

index.js:

// components/navbar/index.jsconst App = getApp();Component({  options: {    addGlobalClass: true,  },  /**   * 组件的属性列表   */  properties: {    pageName:String,    showNav:{      type:Boolean,      value:true    },    showHome: {      type: Boolean,      value: true    }  },  /**   * 组件的初始数据   */  data: {     },  lifetimes: {    attached: function () {      this.setData({        navH: App.globalData.navHeight      })     }  },  /**   * 组件的方法列表   */  methods: {    //回退    navBack: function () {        wx.navigateBack({          delta: 1        })          },    //回主页    toIndex: function () {      wx.navigateTo({        url: '/pages/admin/home/index/index'      })    },  }})

 

index.wxss:

/* components/navbar/index.wxss */.navbar {
     width: 100%;  overflow: hidden;  position: relative;  top: 0;  left: 0;  z-index: 10;}.navbar-title {
     width: 100%;  height: 46px;  line-height: 46px;  text-align: center;  position: absolute;  bottom: 0;  left: 0;  z-index: 10;  background-color: #fff;  color: #333;  font-size: 30rpx;}.navbar-action-wrap{
     position: absolute;  left: 10px;  bottom: 7px;  z-index: 100;  line-height: 1;  padding-top: 4px;  padding-bottom: 4px;}.navbar-action-group {
       border:1px solid #e8e8e8;  border-radius: 20px;  overflow: hidden}.navbar-action_item{
     padding:3px 0;  color: #333;}.navbar-action-group .navbar-action_item{
    border-right: 1px solid #e8e8e8; padding:3px 12px;}

 

index.json:

{
     "component": true,  "usingComponents": {    "ss-icon": "/components/icon/index"  }}

ss-icon 是我自定义的一个 icon 组件，。 如果你没有这个组件，可以在我使用<ss-icon></ss-icon>的地方换成<view></view>组件，然后里面放入你的图标就可以了。

对于组件不太明白的，可以看下相关组件的介绍。

 

组件已创建完毕，现在说下该组件的使用方法：

假设我们需要在index.wxml中需要调用这个组件，

1.在index.json中引用该组件：

{  "usingComponents": {    "navbar": "/components/navbar/index"  }}

 

2.在index.wxml中使用该组件：

 

3.通过index.wxss布局:

page {
     height: 100%;  position: relative;  overflow: hidden;  box-sizing: border-box;}.view-page {
     height: 100%;  width: 100%;  left: 0;  top: 0;  box-sizing: border-box;  position: absolute;  overflow: hidden;}.page-content {
     box-sizing: border-box;  position: relative;  overflow-y: auto;}

 

4.在index.js中获取全局的navH的值:

//获取应用实例const App = getApp();Page({  /**   * 页面的初始数据   */  data: {     },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    let _this = this;    _this.setData({      navH: App.globalData.navHeight    })  },})

 

最后的结果如下图所示：