Recently, I am working on a small program project, and I need to use a custom navigationBar. I have used the navigationBar component of component libraries such as colorUI before, but now I want to write one myself, so I have a small note for today.
Before doing navigationBar, let's understand what is navigationBar?
WeChat applets generally have two bars, a navigation bar, and a tabbar (a row of switching buttons below the applet). The method of customizing the tabbar below is generally relatively simple. Now we will focus on the realization of the custom navigation bar above. .
Why customize the navigationBar?
Native Navigation Bar Limitations
- In addition to the capsule button, the native navigation bar will only display the back button and the "Back to Home" button that is displayed by default when the bottom-level page of the Mini Program opened by the user is not the home page.
- The color of the title text of the native navigation bar is only black and white.
- The layout cannot be changed and cannot be customized.
product demand
If the limitations of the native navbar weren’t enough to get you into custom navbars, product demand is definitely the bigger driver.
Except that the capsule button cannot be customized in the custom navigation bar, other areas are under the control of the programmer, so using the custom navigation bar can undoubtedly meet the various needs of the product.
In the actual development process, we will use the following methods:
- wx.getSystemInfo() is used to obtain system information (such as device brand, device model, screen size, etc., the specific parameters are at the end of the article)
- wx.getMenuButtonBoundingClientRect() is used to obtain the capsule information of the applet
After understanding the custom NAVIGATIONBAR, we need to know how to do it?
-
Remove the native navigation bar.
- Remove the navigationBarTitleText of page.json that needs to customize the navigationBar page.
- Add "navigationStyle": "custom", so that the original navigation bar has disappeared, and even the back button will not appear, which needs to be customized.
- In addition, as early as 2016, WeChat has begun to adapt to the immersive status bar. At present, almost all models of WeChat have an immersive status bar. That is to say, while removing the native navigation bar, the entire screen has become a programmable area .
2. Calculate the navigationBar height.
- Of course, the native capsule button exists, so the next step is to locate the height and position of the custom navigation bar.
- For different models and systems, the positions of the status bar and the capsule button are uncertain, so certain calculations are required, so that you can calmly judge any model.
- Use "wx.getSystemInfo()" to get "statusBarHeight", which determines the most basic distance of the navigation bar from the top of the screen.
- Use "wx.getMenuButtonBoundingClientRect()" to get the capsule information of the applet (note that there are various problems in this api, and the performance is inconsistent at different ends, and the handling of the failure of this api call will be described later), as shown in the figure below, the following coordinate information is displayed on the screen The upper left corner is the origin.
3. Take the following picture as an example, the upper red box is the statusBar, and the height is known; the lower red box is the text content, and the one in the middle is the navigationBarHeight; and the yellow one is the original capsule button, which is also in the vertical center position, and the height is The coordinate information of the upper left corner of the capsule button is known, and it is not difficult to obtain that navigationBarHeight = blue box height × 2 + capsule button.height. (blue box height = capsule button.top - statusBarHeight)
The final calculation formula is: navigationBarHeight = (capsule button.top - statusBarHeight) × 2 + capsule button.height. The distance between the navigationBar and the top of the screen is the navigationBarHeight.
This calculation method is applicable to various models and Android ios.
For the very few cases where "wx.getMenuButtonBoundingClientRect()" gets an error or the data is 0, it can only be simulated. For Android, the general navigationBarHeight is 48px, while for iOS it is generally 40px, and the capsule button height of all models is 32px. It is also obtained through many articles and self-tests on the Internet, and this error can generally be ignored. Of course, the most ideal is that WeChat can hold all models, huh, huh. Finally, I would like to remind that only the real device shall prevail, not to mention the bugs of developer tools.
Code
- To obtain local machine information, the author generally writes it in the onLaunch of the App.
app.js
//计算导航栏高度
const { statusBarHeight, platform } = wx.getSystemInfoSync()
const { top, height } = wx.getMenuButtonBoundingClientRect()
// 状态栏高度
wx.setStorageSync('statusBarHeight', statusBarHeight)
// 胶囊按钮高度 一般是32 如果获取不到就使用32
wx.setStorageSync('menuButtonHeight', height ? height : 32)
// 判断胶囊按钮信息是否成功获取
if (top && top !== 0 && height && height !== 0) {
//获取成功进行计算
const navigationBarHeight = (top - statusBarHeight) * 2 + height
// 导航栏高度
wx.setStorageSync('navigationBarHeight', navigationBarHeight)
} else {
//获取失败使用默认的高度
wx.setStorageSync(
'navigationBarHeight',
platform === 'android' ? 48 : 40
)
}- The author stores these height information in stroage (it can also be stored in global variables), and then creates a navigationBar custom component, which will use these data in the component.
navigationBar.js
// 状态栏高度
statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px',
// 导航栏高度
navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px',
// 胶囊按钮高度
menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px',
// 导航栏和状态栏高度
navigationBarAndStatusBarHeight: wx.getStorageSync('statusBarHeight') +
wx.getStorageSync('navigationBarHeight') +
'px',
//标题
title: '积分游戏'navigationBar.wxml
<view class="navigation-container" style="{
{'height: ' + navigationBarAndStatusBarHeight}}">
<!--空白来占位状态栏-->
<view style="{
{'height: ' + statusBarHeight}}"></view>
<!--自定义导航栏-->
<view class="navigation-bar" style="{
{'height:' + navigationBarHeight}}">
<!-- 这里就是导航栏 你可以将你想要的样式放到这里-->
<view class="navigation-buttons" style="{
{'height:' + menuButtonHeight}}">
<image class="nav-img" src='/images/back.svg'/>
...其余自定义button
</view>
<view class="navigation-title" style="{
{'line-height:' + navigationBarHeight}}">{
{title}}</view>
</view>
</view>
<!--空白占位fixed空出的位置-->
<view style="{
{'height: ' + navigationBarAndStatusBarHeight}}; background: #ffffff"></view>navigationBar.wxss
/* navigationBar.wxss */
.navigation-container {
position: fixed;
width: 100%;
z-index: 99;
top: 0;
left: 0;
background-color: #ffffff;
}
.navigation-bar {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.navigation-buttons {
display: flex;
align-items: center;
margin-left: 20rpx;
border: 1px solid rgba(0, 0, 0, 0.05);
box-sizing: border-box;
border-radius: 30rpx;
background-color: transparent;
}
.nav-img{
height: 32rpx;
width: 32rpx;
}
.navigation-title {
position: absolute;
left: 208rpx;
right: 208rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #000000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Summarize
- The core of the custom navigation bar is the height positioning of the navigation bar, so that the position of the custom back button and other buttons can be accurately positioned, which is consistent with the native capsule. As for wxml's various layout methods, the above is just a list of the author's writing methods.
- Learning small programs, customizing the navigation bar is a very important skill, and the logic in it is not complicated. It is still the same as learning the front end. It needs to be very careful and patient to do the detailed work well.
Parameters obtained by wx.getSystemInfo()
