uni-app 自定义导航栏组件

效果图：
 

使用一般需要隐藏原生导航栏，即可在pages.json文件中，对应的页面设置中添加一下代码即可：

"navigationStyle":"custom"

NavBar 导航栏

导航栏组件，主要用于头部导航，组件名：uni-custom-navBar，代码块： navigationBar。

在 script 中引用组件：

 在 template 中使用组件：

 属性说明：

属性名	类型	默认值	说明
title	String	-	标题文字
titleColor	String	#000000	标题文字的颜色
leftText	String	-	左侧按钮文本
leftColor	String	#000000	左侧按钮文本颜色
rightText	String	-	右侧按钮文本
rightColor	String	#000000	右侧按钮文本颜色
leftIcon	String	-	左侧按钮图标-路径
rightIcon	String	-	右侧按钮图标-路径
backgroundColor	String	#FFFFFF	默认设置导航栏背景颜色
barHeight	Number	90	默认设置导航栏高度
fixed	Boolean	false	是否固定顶部（如果固定，做好下面布局设置margin-top: barHeight）
@clickLeft	-	-	左侧按钮点击时触发
@clickRight	-	-	右侧按钮点击时触发

 这样完成了自定义导航栏组件。

1.代码：CustomComponents8

2.自定义导航栏组件 uni-custom-navbar.vue

Demo下载