Uniapp 自定义导航栏 自定义头部组件_uni-nav-bar

        Uniapp的默认首页头部是一个导航栏，里面包括了一个图标和一个标题，这个导航栏的样式是根据Uniapp的主题颜色进行设置的。虽然这个默认导航栏看起来不错，但是有时候我们需要自定义导航栏的样式，或者在导航栏上加入更多的元素。

  一. 在page.json文件中修改配置

• navigationStyle修改为custom 开启自定义属性

• { 
    "navigationStyle": "custom"  
  }
  

二.Uniapp官方自定义导航栏

        uni-nav-bar 自定义导航栏

• 基本用法

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

三.自定义组件

        小程序默认的头部可以选择背景，title 文字和颜色（颜色只支持黑白）。这时候可以自己编写一个自定义顶部导航组件，更加灵活高效。

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

手机状态栏的高度

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

 样式

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