Small procedure implementation custom navigation bar

1. Discover the problem

Small program page custom navigation bar function has been opened some days (I don’t know this feature can be >> I know), this is very large The improvement of the degree of freedom developed by small procedures, I believe many of the small partners have used this feature, and I also believe that many small partners have stepped on the same pit in this function development process:

  • Machine models, such as cattle: Custom Navigation bar is highly unified in different models;
  • Niki Capsule button: Navigation column elements (text, icon, etc.) how to don’t have the damn capsule Button;
  • The full screen of various sizes, the strange Liu Haizhan, simply caught mad.
The same, these problems are also small asks. But small gray is believed, and the method is more than the problem, so I started myself:

2, an exploration

In order to understand how to adapt , I have turned a wave of official documentation, I don’t say that the official is really a paragraph, >> Details Click:


From the figure Analysis, we can get the following information:

Android is different from iOS, showing the distance between the top to the capsule button is 6PT
  • Capsule button height is 32pt, iOS and Android consistency
  • This. . . It seems that there is nothing to use? ? This is just that the normal screen is referred to, IPX, Android full screen is completely not introduced.
calm, we follow:

Capsule button to the lower edge of the status bar, it seems to be fixed?
  • Android map, it seems a bit strange? The navigation bar is divided into a status bar + title bar?
  • If the car two conditions are met, and that our problem is not solved 80% of?
  • So let’s argue:
The first question: Is the minus to the lower edge of the capsule button fixed?

Very simple, we write a state bar, pass wx.getsysteminfosync (). StatusbarHeight Set height

For good measurement, we set the status bar background color to dark

JS code:

VAR sysinfo = wx.getsysteminfosync (); this.setdata ({statusbarheight: sysinfo.statusbarheight})

WXML code:

WXSS Code:
  .status-bar {background: RGB (141, 71, 71);}    
effect (IPhone6):

   Rendering (Android): 

Is it a bit eyebrow? Yes, it can be seen from the screenshot, iOS is consistent, but Android seems to be different.

What is the distance? We use artifact (WeChat screenshot): 小程序实现自定义导航栏适配完美版



It can be seen thatThe distance between the IOS capsule button and the status bar is: 6px, Android is 8px, and the IOS model, Android is consistent (due to space reasons, there is a screenshot, interested) Measurement)

小程序实现自定义导航栏适配完美版 Second question: The navigation bar is divided into a status bar + title bar?

Through the argumentation of the first problem, it is clear that it is true. And through the measurement results of the first problem and the official provided data, we can calculate the title bar:

Navigation bar height = capsule button height + status bar to capsule button spacing * 2

Android navigation bar height = 32px + 8px * 2 = 48px

iOS navigation bar height = 32px + 6px * 2 = 44px 小程序实现自定义导航栏适配完美版

* Note: Because the capsule button is the native component, it has been manifested, and its unit is PX in a system, so our custom navigation bar must be PX (remember to use rpx) can be perfectly adapted.

3, solve the problem 小程序实现自定义导航栏适配完美版

Through the above analysis, it is believed that the small partners can have a solution to the problem, before the code, small gray Then I will draw a key:

When the navigation component is defined, the component structure is required to be divided into two: status bar + title bar

status bar height can pass WX .getsbarheight Get

Title Bar Height: Android: 48px, iOS: 44px
  • The unit must be consistent with the capsule button, use PX
  • More, on the code (Github address):
  • JS:

Component ({Properties: {Background: {Type: String, Value: ‘RGBA (255, 255, 255, 1)’}, color: {type: string, value: ‘RGBA (0, 0, 0, 1)’}, TitleText: {TYPE: STRING, VALUE: ‘Navigation Bar’}, TitleImg: {Type: String, Value: ”}, packicon: {type: String, Value: ”}, homeicon: {type: string, value: ”}, Fontsize: {TYPE: Number, Value: 16}, iconheight: {TYPE: NUMBER, VALUE: 19}, iconwidth: {type: Number, value: 58}} attached: function () {var there That; That.setStyle ();}, data: {}, methods: {// By getting system information calculation Navigation bar height setnavsize: function () {var there = this, sysinfo = wx.getsysteminfosync (), StatusHeight = sysinfo.statusbarheight, isios = sysinfo.system.indexof’iOS’)> -1, navhem {navhemheight = 48;} else {navhem = 44;} That.SetData ({Status: statusheight, navhem: navhem})}}}} That.SetData ({Status: StatusHeight, Navhem: Function ()} Var That = this, contactle, textStyle, iconstyle; containerStyle = [‘Background:’ +] .join (‘;’); TextStyle = [‘color:’ +, ‘font- Size: ‘+ +’ PX ‘] .join (‘; ‘); iconStyle = [‘ Width: ‘+ +’ PX ‘,’ Height: ‘+ + ‘PX’] .join (‘;’); That.SetData ({ContainerStyle: ContainerStyle, TextStyle: TextStyle, IconStyle: iconSty}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} {wx.navigateback ({DELTA: 1}) this.triggerevent (‘back’, {back: 1})}Home: function () {this.triggerevent (‘Home’, {});}}})


  • [link description] [10]


.navbar {Position: Relative} .back {width: 28px; Height: 100%; Position: absolute; transform: translatey (-50): translatey (-50; transform: TRANSLUTE %); TOP: 50%; Display: flex;} .Back-icon {Left: 16px;}. Home-icon {Left: 44px} .Back-icon image {width: 28px; height: 28px; margin: auto; } .home-icon image {width: 20px; Height: 20px; margin: auto;}. Nav-title, .nav-icon {position: absolute; transform: translate (-50%,50%; Left: 50%; TOP: 50%; font-size: 0; font-weight: bold;}

 Operation renderings:         Photo title:       4, summarizing    Through a small gray demonstration and practical experience, he eventually summarizes the above final solution, but I hope to help the friends. If the small friends feel useful, remember to give Star Oh -> Point me, follow-up to update other components.   The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.                      
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment