Componente de cabeçalho personalizado da barra de navegação personalizada Uniapp

O cabeçalho padrão da página inicial do Uniapp é uma barra de navegação, que inclui um ícone e um título. O estilo desta barra de navegação é definido de acordo com a cor do tema do Uniapp. Embora esta barra de navegação padrão pareça boa, às vezes precisamos personalizar o estilo da barra de navegação ou adicionar mais elementos à barra de navegação.

1. Modifique a configuração no arquivo page.json

Altere navigationStyle para custom para ativar atributos personalizados
```
{ 
  "navigationStyle": "custom"  
}
```

2. Barra de navegação personalizada oficial do Uniapp

barra de navegação personalizada uni-nav-bar

Uso básico

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

Nome do Atributo	tipo	valor padrão	ilustrar
título	Corda	-	texto do título
texto esquerdo	Corda	-	Texto do botão esquerdo
texto à direita	Corda	-	Texto do botão direito
ícone esquerdo	Corda	-	Ícone do botão esquerdo (referência de tipo de ícone Ícone de ícone atributo de tipo)
ícone direito	Corda	-	Ícone do botão direito (referência de tipo de ícone Ícone de ícone atributo de tipo)
cor	Corda	#000000	Cor do ícone e do texto
cor de fundo	Corda	#FFFFFF	Cor de fundo da barra de navegação
fixo	boleano	falso	Se deve consertar o topo
Barra de status	boleano	falso	Se deve incluir a barra de status
sombra	boleano	falso	Existe uma sombra sob a barra de navegação?
fronteira	boleano	verdadeiro	Existe uma borda abaixo da barra de navegação?
altura	Número/Sequência	44	Altura da barra de navegação
escuro	boleano	falso	Ative o modo escuro na barra de navegação
largura esquerda	Número/Sequência	120rpx	Largura do slot esquerdo da barra de navegação
larguradireita	Número/Sequência	120rpx	A largura do slot no lado direito da barra de navegação
Estado	Booleano/String	120rpx	Se ativar a função de título estatístico. Observação: isso só terá efeito se o atributo title for usado e a função de estatísticas estiver ativada

3. Componentes personalizados

O cabeçalho padrão do miniprograma pode selecionar o plano de fundo, o texto do título e a cor (a cor suporta apenas preto e branco). Neste momento, você mesmo pode escrever um componente de navegação superior personalizado, que é mais flexível e eficiente.

	<!-- 状态栏高度 -->
	<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>

A altura da barra de status do telefone celular

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

estilo

 .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;
}