小程式 - 如何自定義導航欄

思路

自定義導航欄高度組成：狀態欄（綠色部分）、導航欄（藍色部分）

狀態欄

通過調用 wx.getSystemInfoSync 獲取

const res = wx.getSystemInfoSync()
this.setData({
   statusBarHeight:res.statusBarHeight
})

導航欄

通過獲取右上角膠囊的位置信息計算，navBarPadding為導航欄上下的間隙 

let res = wx.getMenuButtonBoundingClientRect()
let navBarPadding = (res.top - this.data.setStatusBarHeight) * 2 
this.setData({
   navBarHeight: res.height + navBarPadding
})

代碼

app.js:

App({
  onLaunch () {
     this.setStatusBarHeight()
     this.setNavBar()
  },
  //設置系統狀態欄高度
  setStatusBarHeight(){
      try {
        const res = wx.getSystemInfoSync()
        this.globalData.statusBarHeight = res.statusBarHeight
      }catch(error){
        console.log(error)
      }
  },
  //設置導航欄height
  setNavBar(){
      let res = wx.getMenuButtonBoundingClientRect()
      let navBarPadding = (res.top - this.data.setStatusBarHeight) * 2 
      this.globalData.navBarHeight = res.height + navBarPadding
  }, 
  globalData: {
    statusBarHeight: 20,
    navBarHeight: 44
  }
})

wxml:

<view class="top-bar-wrap">
    <view class="top-bar-main" style="padding-top:{{statusBarHeight}}px;height:{{navBarHeight}}px">
        自定義導航欄
    </view>
</view>

wxss:

.top-bar-wrap{
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.top-bar-main{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff;
}

js:

const app = getApp()
Component({
  data: {
    statusBarHeight: app.globalData.statusBarHeight,
    navBarHeight: app.globalData.navBarHeight
  }
})

最後

setStatusBarHeight、setNavBar這兩個方法最好寫到app.js中，獲取好放在app.globalData中，這兩個高度可能不止自定義導航欄需要用到。

比如使用了自定義導航欄的頁面，因為自定義導航欄是fixed定位脫離文檔流，導致整個頁面就會上移，所以要給頁面加上padding-top，高度跟自定義導航欄的高度一致，即 statusBarHeight + navBarHeight。