此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
提示
右侧的演示中，导航栏上方有圆角，也有顶部的手机模型状态栏内容，以及返回图标和文字不对齐的情况。这是因为网页演示导致，实际中无此情况，请通过右上角的“演示”扫码查看实际效果。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
默认情况下，该组件只有向左的箭头，点击可以返回上一页，如果您想将自定义导航栏用在tabbar(不存在要返回的逻辑)页面， 这样会隐藏左边的返回图标区域。
- 如果想在返回箭头的右边自定义类似"返回"字样，可以将
left-text设置为"返回" - 通过
title参数传入需要显示的标题，通过title-width(rpx)设置标题区域的宽度，文字超出会通过省略号隐藏 - 通过
fixed配置是否将导航栏固定在顶部
说明
- 在小程序中，导航栏会自动适配导航栏右侧的胶囊位置，避开该区域
- 组件底部默认有一条下边框，如您不需要，可以设置
border为false即可
<template> <view> <!-- 2.0.19支持autoBack，默认为false --> <u-navbar title="个人中心" @rightClick="rightClick" :autoBack="true" > </u-navbar> </view> </template> <script> methods:{ rightClick() { console.log('rightClick'); }, leftClick() { console.log('leftClick'); } } </script>
copy
#注意事项
既然是要自定义导航栏，那么首先就要取消系统自带的导航栏，需要在uni-app目的根目录的"pages.json"中设置，同时在此设置状态栏字体的颜色(H5无效)， 自定义导航栏后，如果想通过"uni.setNavigationBarColor"动态设置导航栏颜色相关参数，是可能会出问题的，请勿使用此方式。
// pages.json "pages": [ // navbar-自定义导航栏 { "path": "/pages/navbar/index", "style": { "navigationStyle": "custom" ,// 隐藏系统导航栏 "navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一 } } ]
copy
#导航栏高度
可以通过height(单位px，默认44，和uni-app统导航栏高度一致)配置导航栏的高度，此高度为导航栏内容的高度，不含状态栏的高度，组件内部会自动 加上状态栏的高度，并填充状态栏的占位区域。
#自定义导航栏内容
通过自定义slot传入的内容
<template> <view> <u-navbar leftText="返回" title="个人中心" :safeAreaInsetTop="false" > <view class="u-nav-slot" slot="left" > <u-icon name="arrow-left" size="19" ></u-icon> <u-line direction="column" :hairline="false" length="16" margin="0 8px" ></u-line> <u-icon name="home" size="20" ></u-icon> </view> </u-navbar> </view> </template>
copy
#自定义导航栏背景颜色
uView提供了一个bgColor参数，可以自定义导航栏的背景颜色：
<template> <view> <u-navbar title="" :bgColor="bgColor"> </u-navbar> <view class="content"> <!-- 正文内容 --> </view> </view> </template> <script> export default { data() { return { bgColor: '#001f3f', } } } </script>
