Why get to the height of the navigation bar

Get the height of the navigation bar, of course, is in order to customize the navigation bar, uniapp provides us with a navigation bar by default, each page is the title of the above, but if not satisfied with the default navigation bar, we can choose a custom navigation bar, for example, I in the following, in order to meet the needs of the business, put a search box, replaced the original title bar.

It’s not just about putting things in the navigation bar. If you want to customize the background, you need to customize the navigation bar, as shown below:

Several parameters for the header of the applets

If we turn on the page custom navigation bar, using index as an example, we add the following code to pages. Json, which defaults to default.

Let’s look at a couple of parameters

  • The head height
  • Status bar height
  • Navigation bar height (title bar height)
  • Wechat applets small capsule location information

The head height

We can divide the applet page into three parts, one is the head of the page, which is the part shown in the picture, and the body of the page, which is the part where we usually write the code, and the last part is the tabbar at the tail.

Status bar height

The status bar is the part of our phone that shows battery power, wifi, and is also part of the head. The statusBarHeight can be easily obtained by calling uni.getsysteminfosync ().statusbarheight.

Navigation bar height (title bar)

Navigation bar is the default title bar, micro channel small program small capsule is vertical and navigation bar in the middle, we want to say is the height of the navigation bar.

We can’t get this directly in UNIApp. We can look at the official document. What we need to get is the height of the navigation bar of wechat applet.

Wechat applets small capsule location information

Wechat applet has a small capsule in the upper right corner, we can call the native wechat applet API to get it

We can get the width and height of the small capsule and four position information, which will be used to calculate the height of the navigation bar later.

// #ifdef MP-WEIXIN
/ / WeChat capsule position information width, height, top, right, left, bottom
const custom = wx.getMenuButtonBoundingClientRect()
// console.log(custom)
// #endif
Copy the code

Calculate the navigation bar height of wechat applet

Because every cell phone navigation bar height is not the same, we should be dynamic to get the height of the navigation bar, like the search box above, how are we going to make a search box and small WeChat capsule vertical center, because small capsule is centered vertically in the navigation bar, so we have to make a search box in the navigation bar vertical center, then we will take the height of the navigation bar, You can then easily center the flex layout vertically.

A formula to calculate

Take a look at the picture first

Calculation formula:

  • Height of the navigation bar= Capsule height + (top distance – status bar height) * 2
  • The head height= Navigation bar height + Status bar height

Then MY suggestion is to encapsulate this parameter in the global variable globalData of UNIApp, because this has been established from the beginning and does not need to be changed in the later stage. Any page that needs to be used can be directly accessed without vuEX storing it.

Code implementation

Finally, let’s take a look at the code I wrote.

App. Vue:

<script>
export default {
  globalData: {
    statusBarHeight: 0.// Status navigation bar height
    navHeight: 0.// Total height
    navigationBarHeight: 0.// Navigation bar height (title bar height)
  },
  onLaunch: function () {
    console.log("App Launch")

    // Status bar height
    this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

    // #ifdef MP-WEIXIN
    / / WeChat capsule position information width, height, top, right, left, bottom
    const custom = wx.getMenuButtonBoundingClientRect()
    // console.log(custom)

    // Navigation bar height (title bar height) = capsule height + (top distance - Status bar height) * 2
    this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
    / / the console. The log (" navigation bar height: "+ enclosing globalData. NavigationBarHeight)

    // Total height = Status bar height + navigation bar height
    this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight

    // #endif

    console.log(this.globalData)
  },
  onShow: function () {
    console.log("App Show")},onHide: function () {
    console.log("App Hide")
  },
}
</script>
Copy the code

We could do a better job of encapsulating this in mixin.js, importing the parameters directly into any page we want to use, and then calling it in the life cycle onLoad.

Mixins. Js:

export const systemInfo = {
  data: () = > ({
    statusBarHeight: 0.navigationBarHeight: 0.navHeight: 0.windowHeight: 0.// The window height can be used
  }),

  methods: {
    // Obtain device information
    getSystemInfo() {
      this.statusBarHeight = getApp().globalData.statusBarHeight
      this.navigationBarHeight = getApp().globalData.navigationBarHeight
      this.windowHeight = uni.getSystemInfoSync().windowHeight
      this.navHeight = getApp().globalData.navHeight
    },
  },
}

Copy the code

supplement

Another point to make: Why don’t I just go to the windowHeight window in globalData?

This is also a hole I stepped in, let’s talk about the window height available, we don’t define the navigation bar, so

  • windowHeight= Screen height –Tabbar height– Head height

If we customize the navigation bar, then

  • windowHeight= Screen height –Tabbar height

We don’t have to make the navigation bar available on every page. So, we don’t have to make the navigation bar available on every page. So, we don’t have to make the navigation bar available on every page when the applet loads.

conclusion

Thank you for reading this article. I hope it was helpful. If you have any questions, please comment in the comments section.

Creation is not easy, I hope you can click a like to support ❤️❤️.