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 ignore by themselves, thought I was really stupid as a small white can not distinguish ah…)
This is a picture from the official WeChat document
Default navigation bar
The applet has default navigation bar
(The example diagram is, of course, the best Zelda in the world)
So that’s what the default navigation bar looks like, and you should be familiar with it, but when you go to another page, you’ll have a little arrow in the top left corner that goes back to you, but I’m not going to put the image in there
Small programs have no default navigation bar
When there is no default navigation bar, the page takes up the entire phone screen, including the phone status bar. , to achieve immersion, in fact, this is more aesthetic, but the corresponding development cost is also higher
How to remove the default navigation bar?
Change the NavigationStyle field in the JSON file of the Page to “Custom”. The default is “Default”. See WeChat official documentation for details
{
"navigationStyle": "custom"
}Note that the small app capsule in the upper right corner is impossible to remove, and it will always be there whether you customize the navigation bar or not
How to customize the navigation bar
Now let’s get into our main topic today. First of all, let me show you the final effect
The final result
Define two buttons, return to previous page and return to home page, of course, you can also make a search box, or do a drop-down or something is ok, provided it is not too ugly…
1. Development ideas
The navigation bar we just talked about can actually be broken down into two parts, the top part is called the status bar, the bottom part is the real navigation bar
Status bar section
The actual navigation bar section
2. Get the status bar height
So to make an empty view occupy the position of the status bar, can not let the content of our Page Page and the system status bar overlap, WeChat official provides relevant API so that we can easily get the height of the status bar wx.getSystemInfo
Code sample
Wx.getSystemInfo ({success (res) {console.log(res.statusBarHeight) // unit px}})Calculate the height of the navigation bar
Status bar solved, and then is the navigation bar, my idea here is a small program on the upper right corner of the capsule for reference, the approximate formula is as follows
Get the height of the capsule Get the height of the status bar (as mentioned above) Then the height of the navigation bar CustomNavHeight = (top - statusBarHeight) * 2 + heightInformation such as coordinates for acquiring capsule width, WeChat official is also provides the relevant API wx. GetMenuButtonBoundingClientRect
Code sample
/ / this is a synchronized method const. The rect = wx getMenuButtonBoundingClientRect const () {/ / on the coordinates of the top border, / / high height, / / wide width} = the rectProblem 4.
And then the problem seems to be solved perfectly, right? Nonono When I finish a meal, I always feel something is wrong, always feel a bit out of place, and then I resort to Photoshop
On the WeChat developer tool, the simulation model I chose is iPhone 5, which is the information obtained from the WeChat API
Then go to Photoshop and use the guide to verify (don’t lose a pixel when you cut the entire simulated Page).
And then the odd thing happens, the right boundary coordinates are exactly the same as the left boundary coordinates, and the upper boundary coordinates are completely different from the lower boundary coordinates2 p!(In PS can be very convenient to measure, but different models estimate the error may be different), no wonder just I always feel a little misplaced, in fact, someone has found this problem, I just stepped on the pit again, the following is the small program official forum screenshot
There is no way but to improve the formula, but it should be noted that the error should be different for different models, and only a rough value can be given here
customNavHeight = (top - statusBarHeight + 2) * 2 + heightconclusion
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 been improved
Xi tea home page
But if you want to customize some buttons to align with the applet capsule, this may be difficult, and if your product manager asks you, you’ll have to throw the kettle at WeChat, and hope the WeChat authorities fix the problem soon
Post code
index.wxml
<view class="container" style="height: {{ windowHeight }}px;" > <view class="container-top"> <view class="custom-header" style="height: {{ statusBarHeight + navBarHeight }}px;" > <! <view class="custom-header__status-bar" style="height: {{statusBarHeight}}px;" style="height: {{statusBarHeight}} "; ></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>index.js
// pages/index/index.js Page({/** * Page initial data */ data: {windowhEight: 0, windowWidth: 0, // statusBarHeight (px) statusBarHeight: 0) 0, navBarHeight: 0, menuButtonHeight: 0, menuButtonWidth: 0,}, /** * Lifetime function -- listen for page loading */ onLoad: Function (options) {}, /** * Lifetime function -- Listen for page first render */ 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' }) }, })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%B 6%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; }There are still some files that haven’t been posted, so you need to go to GitHub to get them
Project Warehouse Address
Project Warehouse Address