Applet - how to customize the navigation bar

Thinking

 

Custom navigation bar height: the status bar (the green part), navigation bar (the blue section)

Status Bar

Obtained by calling wx.getSystemInfoSync

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

Navigation Bar

Acquiring location information calculated by the upper-right corner of the capsule, navBarPadding gap up and down navigation bar 

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

Code

app.js:

The App ({ 
  OnLaunch () { 
     the this .setStatusBarHeight ()
      the this .setNavBar () 
  }, 
  // Set the system status bar height 
  setStatusBarHeight () {
       the try { 
        const RES = wx.getSystemInfoSync ()
         the this .globalData.statusBarHeight = res.statusBarHeight 
      } the catch (error) { 
        the console.log (error) 
      } 
  }, 
  // set the navigation bar height 
  setNavBar () { 
      the let RES = wx.getMenuButtonBoundingClientRect () 
      the let navBarPadding = (res.top - the 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
  }
})

At last

setStatusBarHeight, setNavBar wrote two best method app.js, gets good place app.globalData, the two may be more than the height of the need to use custom navigation bar.

For example, using a custom navigation bar of the page, because the custom navigation bar is fixed positioning from the document flow, causing the entire page will move up, so give pages plus padding-top, highly highly consistent with custom navigation bar, That statusBarHeight + navBarHeight.