Navbar 自定义导航栏

此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。

平台差异说明

App(vue)	App(nvue)	H5	小程序
√	×	√	√

注意事项

既然是要自定义导航栏，那么首先就要取消系统自带的导航栏，需要在uni-app目的根目录的"pages.json"中设置，同时在此设置状态栏字体的颜色(H5无效)，自定义导航栏后，如果想通过"uni.setNavigationBarColor"动态设置导航栏颜色相关参数，是可能会出问题的，请勿使用此方式。

// pages.json

"pages": [
	// navbar-自定义导航栏
	{
		"path": "/pages/navbar/navbar",
		"style": {
			"navigationStyle": "custom" ,// 隐藏系统导航栏
			"navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
		}
	}
]

基本使用

默认情况下，该组件只有向左的箭头，点击可以返回上一页，如果您想将自定义导航栏用在tabbar(不存在要返回的逻辑)页面，这样会隐藏左边的返回图标区域。

<m-navbar title="个人中心" />

导航栏高度

可以通过height(单位px，默认44，和uni-app统导航栏高度一致)配置导航栏的高度，此高度为导航栏内容的高度，不含状态栏的高度，组件内部会自动加上状态栏的高度，并填充状态栏的占位区域。

注意上方说的uni-app方的高度，这里指的是H5，和APP。至于各家小程序，由于受导航栏右侧胶囊的影响，目前组件内部给安卓设定的导航栏高度为48px，iOS设定的导航栏高度为44，这是结合了大量的实践的出来的结果，具备完好的兼容性。

自定义导航栏内容

通过自定义slot传入的内容

API

Props

参数	说明	类型	默认值	可选值
safeAreaInsetTop	是否开启顶部安全区适配	Boolean	true	false
placeholder	固定在顶部时，是否生成一个等高元素，以防止塌陷	Boolean	false	true
fixed	导航栏是否固定在顶部	Boolean	true	false
border	导航栏底部是否显示下边框	Boolean	true	false
bgColor	导航栏背景设置	String	#ffffff	-
leftIcon	左边返回图标的名称，只能为mView自带的图标	String	left	-
leftIconSize	左侧返回图标的大小	Number \| String	20	-
leftIconColor	左侧返回图标的颜色	String	color['m-main-color']	-
leftText	左边的提示文字	String	-	-
rightIcon	左边返回图标的名称，只能为mView自带的图标	String	-	-
rightText	右边的提示文字	String	-	-
title	导航栏标题，如设置为空字符，将会隐藏标题占位区域	String	-	-
titleStyle	标题的样式，对象或字符串形式	Object \| String	-	-
titleWidth	导航栏标题的最大宽度，内容超出会以省略号隐藏，单位`px`	Number \| String	400rpx	-
height	导航栏高度(不包括状态栏高度在内，内部自动加上)，单位`px`，注意小程序设置高度无效，由于胶囊原因，会自动计算高度具体查看uni.$m.sys方法。	Number \| String	44px	-
autoBack	点击左侧区域(返回图标)，是否自动返回上一页	Boolean	false	true

Slot

名称	说明
left	自定义左侧部分内容
right	自定义右侧部分内容
center	自定义中部内容

Event

事件名	说明	回调参数
leftClick	点击左侧区域	-
rightClick	点击右侧区域	-

# Navbar 自定义导航栏

# 平台差异说明

# 注意事项

# 基本使用

# 导航栏高度

# 自定义导航栏内容

# API

# Props

# Slot

# Event