小程序 - 如何自定义导航栏

思路

 

自定义导航栏高度组成：状态栏（绿色部分）、导航栏（蓝色部分）

状态栏

通过调用 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。