This is the second day of my participation in the August More text Challenge. For details, see:August is more challenging

The top navigation bar font color provided by small programs only supports # FFFFFF and #000000. Due to their limitations, most cases require custom navigation bar navigation bar replacement. The basic process is as follows

  1. Remove the original small program built-in navigation bar;
  2. Calculates the height of the navigation bar. Avoid the inconsistency of height caused by the use of built-in navigation bar on some pages;
  3. Locate the title text.

Remove the ugly black shell at the top;

Case 1: Individual page customization Modify the following in the JSON configuration file to which the current page belongs:

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

In the global JSON configuration file (app.json), modify the Windows parameters as follows (manually add the parameters without Windows configuration) :

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

Effect:

Gets the status bar height

Note: The height obtained is in px

wx.getSystemInfo({
	success: res= > {
		const statusBarHeight = res.statusBarHeight
	}
})
Copy the code

The height of the status bar is the height of the pink area in the figure;

Height of navigation bar

The height of the pink area plus the height of the red area of xie is the height of our customized navigation bar

On all models, the height of the navigation bar is the height of the status bar plus 44px

	const navigationHeight = statusBarHeight + 44 + 'px';
Copy the code

At this point we find the height of the navigation bar

Locate the title

The title and the capsule in the upper right corner are in the same horizontal area, shown in yellow:

First obtain the position information of the capsule (obtain the result in px)

	const capsuleInfo = wx.getMenuButtonBoundingClientRect();
	// Bottom: the distance between the bottom of the capsule and the top of the screen
	//height: height of the capsule
	//left: the distance from the left of the capsule to the left of the screen
	//right: the distance between the right side of the capsule and the left side of the screen
	//top: distance from the top of the capsule to the top of the screen
	//width: the width of the capsule
Copy the code

We just need to get the height and top of the capsule to complete the title text positioning

  <view class="title" style="height:{{height}}px; top:{{top}}px;">The title</view>
Copy the code

The end of the

At this point, the replacement of the navigation bar has been completed, and other personalized styles can be adjusted according to their own needs.