微信小程序——自定義導航欄

微信頭部導航欄可能經過json配置：

 

可是有時候咱們項目需求可能須要自定義頭部導航欄，以下圖所示：

 

如今具體說一下實現步驟及使用方法：

步驟：

1.在 app.json 裏面把 "navigationStyle" 設置爲 "custom"

這樣子以後就只會保留右上角膠囊按鈕了。

 

2.計算相關值

由於在不一樣的手機型號頭部那條欄目高度可能不一致，因此爲了咱們適配更多型號，咱們須要計算3個值：

以下圖：

1. 整個導航欄的高度；

2. 膠囊按鈕與頂部的距離；

3. 膠囊按鈕與右側的距離。

小程序能夠經過 wx.getMenuButtonBoundingClientRect() 獲取膠囊按鈕的信息  和 wx.getSystemInfo() 獲取設備信息。

以下圖：

經過這些信息咱們能夠計算出上面說的3個值：

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

2. 膠囊按鈕與頂部的距離 = top；

3.膠囊按鈕與右側的距離 = windowWidth - right。

 

App.js 代碼以下：

App({
  globalData: {
   
  },
  onLaunch: function () {
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: res => {
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top,//膠囊按鈕與頂部的距離
          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//導航高度
        this.globalData.navHeight = navHeight;
        this.globalData.navTop = navTop;
        this.globalData.windowHeight = res.windowHeight;
      },
      fail(err) {
        console.log(err);
      }
    })
  }
})

 

3.由於這個頭部導航是公共的，因此咱們最好把它設置成一個組件，命名爲navbar

 

index.wxml: 

<view class="navbar custom-class" style='height:{{navHeight}}px;background-color:{{bgColor}}'>
  <view wx:if="{{showNav}}" class="navbar-action-wrap navbar-action-group row item-center" style='top:{{navTop}}px;background-color:rgba(255,255,255,.6)'>
      <ss-icon name="back" color="{{iconColor}}" size="15px" block="{{true}}" class="navbar-action_item" bind:click="_navBack"></ss-icon>
      <ss-icon name="index" color="{{iconColor}}" size="15px" block="{{true}}" class="navbar-action_item last" bind:click="_toIndex"></ss-icon>
  </view>
  <view class='navbar-title' style='top:{{navTop}}px'>
    {{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;
  flex-shrink: 0;
}

.navbar-title {
  width: 100%;
  box-sizing: border-box;
  padding-left: 115px;
  padding-right: 115px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: absolute;
  left: 0;
  z-index: 10;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.navbar-action-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  left: 10px;
  z-index: 11;
  line-height: 1;
  padding-top: 4px;
  padding-bottom: 4px;
}

.navbar-action-group {
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  overflow: hidden;
}

.navbar-action_item {
  padding: 3px 0;
  color: #333;
}

.navbar-action-group .navbar-action_item {
  border-right: 1px solid #f0f0f0;
  padding: 3px 14px;
}

.navbar-action-group .last {
  border-right: none;
}

 

 

index.json:

{
  "component": true,
  "usingComponents": {
    "ss-icon": "../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'>
    <!--這裏放你的內容-->
  </view>
</view>

 

最後的結果以下圖所示：

 

3.參數說明

參數	說明	類型	默認值
page-name	當前頁面名稱	String	--
show-nav	是否顯示左側圖標按鈕	Boolean	true
bg-color	導航背景顏色	String	#fff
icon-color	左側圖標顏色	String	#000
custom-class	導航樣式

完整代碼git地址：微信小程序自定義導航欄