Uniapp 自定义导航栏 自定义头部组件

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

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

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

• { 
    "navigationStyle": "custom"  
  }
  

二.Uniapp官方自定义导航栏

        uni-nav-bar 自定义导航栏

• 基本用法

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

属性名	类型	默认值	说明
title	String	-	标题文字
leftText	String	-	左侧按钮文本
rightText	String	-	右侧按钮文本
leftIcon	String	-	左侧按钮图标（图标类型参考 Icon 图标 type 属性）
rightIcon	String	-	右侧按钮图标（图标类型参考 Icon 图标 type 属性）
color	String	#000000	图标和文字颜色
backgroundColor	String	#FFFFFF	导航栏背景颜色
fixed	Boolean	false	是否固定顶部
statusBar	Boolean	false	是否包含状态栏
shadow	Boolean	false	导航栏下是否有阴影
border	Boolean	true	导航栏下是否有边框
height	Number/String	44	导航栏高度
dark	Boolean	false	导航栏开启暗黑模式
leftWidth	Number/String	120rpx	导航栏左侧插槽宽度
rightWidth	Number/String	120rpx	导航栏右侧插槽宽度
stat	Boolean/String	120rpx	是否开启统计标题功能。注意：只有使用title 属性 ，且开启了统计功能才生效

三.自定义组件

        小程序默认的头部可以选择背景，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;
}