微信小程序 自定义头部导航栏 navigationStyle

 

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

 

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

步骤：

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:

 

<!--components/navbar/index.wxml-->
<view class="navbar" style='height:{{navH}}px'>
  <view class="navbar-action-wrap  {{showHome ? 'navbar-action-group' : ''}} row item-center" wx:if="{{showNav}}">
    <block wx:if="{{showHome}}">
    <ss-icon name="back" color="#333" size="15px" custom-class="navbar-action_item first" bind:click="navBack"></ss-icon>
    <ss-icon name="index"  color="#333" size="16px" custom-class="navbar-action_item" bind:click="toIndex" ></ss-icon>
    </block>
    <block wx:else>
<ss-icon name="back"  color="#fff" size="18px" custom-class="navbar-action_item first" bind:click="navBack"></ss-icon>
    </block>
    
  </view>
  <view class='navbar-title'>
    {{pageName}}
  </view>
</view>

 

 

index.js:

 

// components/navbar/index.js
const 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中使用该组件：

 

<view class='view-page'>
  <navbar page-name="你当前页面的名字"></navbar>
  <view class='page-content' style='height:calc(100vh - {{navH}}px)'>
    <!--这里放你的内容-->
  </view>
</view>

 

 

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
    })
  },

})

 

 

最后的结果如下图所示：