Uniapp custom navigation bar custom header component

The default homepage header of Uniapp is a navigation bar, which includes an icon and a title. The style of this navigation bar is set according to the theme color of Uniapp. Although this default navigation bar looks good, sometimes we need to customize the style of the navigation bar or add more elements to the navigation bar.

1. Modify the configuration in the page.json file

Change navigationStyle to custom to enable custom attributes
```
{ 
  "navigationStyle": "custom"  
}
```

2. Uniapp official custom navigation bar

uni-nav-bar custom navigation bar

Basic usage

<uni-nav-bar title="导航栏组件"></uni-nav-bar>

attribute name	type	default value	illustrate
title	String	-	title text
leftText	String	-	Left button text
rightText	String	-	Right button text
leftIcon	String	-	Left button icon (icon type reference Icon icon type attribute)
rightIcon	String	-	Right button icon (icon type reference Icon icon type attribute)
color	String	#000000	Icon and text color
backgroundColor	String	#FFFFFF	Navigation bar background color
fixed	Boolean	false	Whether to fix the top
statusBar	Boolean	false	Whether to include status bar
shadow	Boolean	false	Is there a shadow under the navigation bar?
border	Boolean	true	Is there a border under the navigation bar?
height	Number/String	44	Navigation bar height
dark	Boolean	false	Turn on dark mode in navigation bar
leftWidth	Number/String	120rpx	Navigation bar left slot width
rightWidth	Number/String	120rpx	The width of the slot on the right side of the navigation bar
stat	Boolean/String	120rpx	Whether to enable the statistical title function. Note: This will only take effect if the title attribute is used and the statistics function is turned on

3. Custom components

The default header of the mini program can select the background, title text and color (color only supports black and white). At this time, you can write a custom top navigation component yourself, which is more flexible and efficient.

	<!-- 状态栏高度 -->
	<view style="height: {
   
   {statusBarHeight}}px"></view>
	<!-- 标题栏高度 -->
	<view class='nav' style="height: {
   
   {toBarHeight}}px;"> 
    	<van-icon class="image" name="arrow-left" bindtap="backClick"/>
		<text style="height: {
   
   {toBarHeight}}px;line-height: {
   
   {toBarHeight}}px">配网中 
    </text>
	</view>

The height of the mobile phone status bar

 // 手机状态栏的高度
 let sysinfo = wx.getSystemInfoSync();

style

 .box {
  background: #FFF;
  font-weight: 500;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
}
 
.nav {
  width: 100%;
  font-size: 34rpx;
}
 
.nav .image {
  font-size: 40rpx; 
  font-weight: bold;
  margin-top: 26rpx;
  float: left;
  margin-left: 15rpx;
}
 
.nav text {
  float: left;
  margin-left: 30rpx;
}