Custom applet navigation bar

Custom applet navigation bar

Recently we do small programs, but I never touched applet small white, so we have to study, but also their own opened a project try water, in the process of doing it met the needs of custom navigation, well behind the thought of project may also have such demand, decided to further discuss about WeChat small program how to customize the navigation bar.

The basic concept

First of all, understand a basic concept, what is called the navigation bar (small program old players can be ignored by themselves, want to have as a small white I was really silly not clear ah…)

This is the picture above the official wechat document

Default navigation bar

Applets have a default navigation bar

(The example, of course, is Zelda.)

This is what the default navigation bar looks like, and you’re probably familiar with it, but when you jump from another page, you have a little arrow that goes back in the top left corner, so I’m not going to put a graph here

Applets have no default navigation bar

When there is no default navigation bar, the page takes up the entire screen, including the phone’s status bar. , achieved immersion, in fact, this is more aesthetic, but the corresponding development cost is higher

How to remove the default navigation bar?

The navigationStyle field in the JSON file of Page is changed to Custom, that is, custom, default is default, that is, there is a default navigation bar, details see wechat official documents

{
  "navigationStyle": "custom"
}
Copy the code

Note that the little program capsule in the upper right corner cannot be removed; it will always be there whether you customize the navigation bar or not

How do I customize the navigation bar

So let’s start with today’s topic, and let me show you the final result

The final result

Define two buttons, go back to previous page and go back to home page, of course you can also make a search box, or do a drop-down menu or something, as long as it’s not too ugly…

1. Development ideas

The navigation bar we just mentioned can actually be broken down into two parts, the top part is called the status bar, and the bottom part is the real navigation bar

Status bar section

The real navigation section

2. Obtain the height of the status bar

So we want to make an empty view to occupy the position of the status bar, can not let our Page Page content with the system status bar overlap, wechat official provides related API to let us can easily get the status bar height wX.getSystemInfo

Code sample

wx.getSystemInfo({
  success (res) {
    console.log(res.statusBarHeight) / / unit of px}})Copy the code

3. Calculate the height of the navigation bar

The status bar is solved, and then the navigation bar. My idea here is to refer to the capsule in the upper right corner of the mini program. The formula is as follows

Get the height of the capsule. Get the height of the status bar. Then the high customNavHeight of the navigation bar = (top -) statusBarHeight) * 2 + heightCopy the code

Information such as coordinates for acquiring capsule width, WeChat official is also provides the relevant API wx. GetMenuButtonBoundingClientRect

Code sample

// This is a synchronous method
const rect = wx.getMenuButtonBoundingClientRect()
const {
  // The coordinates of the upper boundary
  top,
  / / high
  height,
  / / wide
  width
} = rect
Copy the code

Problem 4.

And then the problem seems to be solved perfectly, right? When I finished my meal, I always felt something was wrong, I always felt a little misplaced, so I went to Photoshop

In the wechat Developer tool, the analog model I chose was the iPhone 5, according to the wechat API

Then use the guides in Photoshop to verify (rest assured, when cutting the entire simulated Page, not a single pixel is missing).

Then something strange happened. The right boundary coordinates and the left boundary coordinates were exactly the same, and the upper boundary coordinates and the lower boundary coordinates were completely different2 p!(in PS can be very convenient to measure, but different models estimate error may be different), no wonder just I always feel a little misplaced, in fact, someone found this problem, I just stepped on the pit again, below is the small program official forum screenshots

There is no way but to improve the formula just now, but it should be noted that the error of different models should be different, and only a rough value can be given here

customNavHeight = (top - statusBarHeight + 2) * 2 + height
Copy the code

conclusion

After the tutorial, you should also know about how to customize the small program navigation, but also some pit inside, want to accurately control the height of the navigation bar is almost impossible, must be some deviation, so I think the custom navigation can be used to make the background of the immersion, or can be, for example the following xi tea home page, so that we can improve the user experience, The overall aesthetic of the program has also improved

Xi tea home page

But if you want to customize some buttons, with small program capsule aligned, it may be more difficult, if your product manager asks, you have to put the pan to wechat [dog head], hope wechat official can fix this problem as soon as possible

Post code

index.wxml

<view
  class="container"
  style="height: {{ windowHeight }}px;"
>
  <view class="container-top">
    <view
      class="custom-header"
      style="height: {{ statusBarHeight + navBarHeight }}px;"
    >
      <! -- Occupy the height of the status bar -->
      <view class="custom-header__status-bar" style="height: {{ statusBarHeight }}px;"></view>
      <view
        style="height: {{ navBarHeight }}px; line-height: {{ navBarHeight }}px;"
        class="u-flex u-p-l-30 u-p-r-30"
      >
        <view
          style="height: {{ menuButtonHeight }}px; line-height: {{ menuButtonHeight }}px; width: {{ menuButtonWidth }}px; border-radius: {{ menuButtonHeight / 2 }}px;"
          class="u-flex u-p-l-20 u-p-r-20 custom-header__opt-button"
        >
          <text class="iconfont icon-arrow-left u-flex-1" bind:tap="goBack"></text>
          <text class="iconfont iconvertical_line custom-header__opt-button-interval u-flex-1"></text>
          <text class="iconfont icon-home-fill u-flex-1" bind:tap="goHome"></text>
        </view>
      </view>
    </view>
  </view>
</view>
Copy the code

index.js

// pages/index/index.js
Page({

  /** * page initial data */
  data: {
    windowHeight: 0.windowWidth: 0.// Status bar height (px)
    statusBarHeight: 0.navBarHeight: 0.menuButtonHeight: 0.menuButtonWidth: 0,},/** * life cycle function -- listen for page loading */
  onLoad: function (options) {},/** * life cycle function -- listen for the first rendering of the page */
  onReady: function () {
    this.getSystemInfo().then(({ info, rect }) = > {
      console.log(info)
      console.log(rect)
      const {
        windowHeight,
        windowWidth,
        statusBarHeight
      } = info
      let {
        top,
        height,
        width
      } = rect
      top += 2
      const navBarHeight = (top - statusBarHeight) * 2 + height
      this.setData({
        windowHeight,
        windowWidth,
        statusBarHeight,
        navBarHeight,
        menuButtonHeight: height,
        menuButtonWidth: width,
      })
    })
    const rect = wx.getMenuButtonBoundingClientRect()
    let {
      top,
      height,
      width
    } = rect
  },
  getSystemInfo() {
    return new Promise((resolve, reject) = > {
      const rect = wx.getMenuButtonBoundingClientRect()
      wx.getSystemInfo({
        success: info= > {
          resolve({
            info, rect
          })
        }
      })
    })
  },
  goBack() {
    wx.navigateBack()
  },
  goHome() {
    wx.reLaunch({
      url: '/pages/home/home'})}})Copy the code

index.wxss

.container{}.container-top {
  widows: 100%;
  height: 400rpx;
  background: url(https://read-1252195440.cos.ap-guangzhou.myqcloud.com/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%8A%B6%E6 %80%81%E6%A0%8F/%E5%A1%9E%E5%B0%94%E8%BE%BE%E5%A4%A7%E5%B8%88%E4%B9%8B%E5%89%91.jpg) center center / cover no-repeat;
}

.custom-header__opt-button {
  border: 1px #dcdcdc solid;
  /* border: 1px #FF0000 solid; * /
}
.custom-header__opt-button .icon-arrow-left {
  color: # 000000;
  text-align: center;
  font-weight: 600;
}
.custom-header__opt-button .icon-home-fill {
  color: # 000000;
  text-align: center;
  font-weight: 600;
}
.custom-header__opt-button-interval {
  color: #dcdcdc;
  font-weight: 600;
  text-align: center;
}
.icon-arrow-left {
  vertical-align: middle;
}
Copy the code

There are still some files that have not been posted, so you need to go to Github to get them

Project Warehouse Address

Project Warehouse Address