> 原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。
> 更多功能参考此示例：[https://ext.dcloud.net.cn/plugin?id=1765](https://ext.dcloud.net.cn/plugin?id=1765)
* [原生导航栏的通用配置](https://www.kancloud.cn/wangking/uniapp/1885150#_6)
* [5+ APP 导航栏扩展](https://www.kancloud.cn/wangking/uniapp/1885150#5_APP__10)
* [去除原生导航栏](https://www.kancloud.cn/wangking/uniapp/1885150#_14)
* [去除原生导航栏后自绘导航栏](https://www.kancloud.cn/wangking/uniapp/1885150#_23)
* [给原生导航栏添加自定义按钮](https://www.kancloud.cn/wangking/uniapp/1885150#_55)
* [导航栏带红点和角标](https://www.kancloud.cn/wangking/uniapp/1885150#_94)
* [导航栏带下拉选择（城市选择）](https://www.kancloud.cn/wangking/uniapp/1885150#_119)
* [导航栏带搜索框](https://www.kancloud.cn/wangking/uniapp/1885150#_140)
* [透明渐变样式](https://www.kancloud.cn/wangking/uniapp/1885150#_142)
* [导航栏带图片](https://www.kancloud.cn/wangking/uniapp/1885150#_158)
* [通过setStyle方式动态修改原生导航栏样式](https://www.kancloud.cn/wangking/uniapp/1885150#setStyle_186)
## 原生导航栏的通用配置
> 原生通用配置：即小程序、APP、H5都通用的配置，修改pages.json，page>style(单个页面设置)或者globalStyle(全局设置)中进行navigationBar相关配置
> 参考[https://uniapp.dcloud.io/collocation/pages?id=style](https://uniapp.dcloud.io/collocation/pages?id=style)
## 5+ APP 导航栏扩展
> 除了上面提到的通用配置以外，还提供了5+ APP(即iOS、Android)的增强自定义配置，修改pages.json中的app-plus>titleNView的相关配置
> 参考文档：[https://uniapp.dcloud.io/collocation/pages?id=app-plus](https://uniapp.dcloud.io/collocation/pages?id=app-plus)
## 去除原生导航栏
> 修改pages.json，page>style(单个页面设置)或者globalStyle(全局设置)中将navigationStyle(默认default)修改为custom
> 被设置为custom的页面，没有了原生导航，则需要开发者使用view自行绘制导航栏
~~~
"globalStyle": {
"navigationStyle": "custom"
}
~~~
## 去除原生导航栏后自绘导航栏
> 通过绘制一个占位的view固定放在状态栏
> uni-app提供了一个状态栏高度的css变量，具体参考：[https://uniapp.dcloud.io/frame?id=css变量](https://uniapp.dcloud.io/frame?id=css%E5%8F%98%E9%87%8F)
> 推荐使用第三方组件 (当然优先推荐使用原生，性能更好)
>
> 1. [https://ext.dcloud.net.cn/plugin?id=974](https://ext.dcloud.net.cn/plugin?id=974)
> 2. [https://ext.dcloud.net.cn/plugin?id=52](https://ext.dcloud.net.cn/plugin?id=52)
~~~
<!-- #ifdef APP-PLUS -->
<view class="status_bar">
<view class="top_view"></view>
</view>
<!-- #endif -->
~~~
~~~
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #F8F8F8;
}
.top_view {
height: var(--status-bar-height);
width: 100%;
position: fixed;
background-color: #F8F8F8;
top: 0;
z-index: 999;
}
~~~
## 给原生导航栏添加自定义按钮
> 按钮的点击事件需要在页面监听onNavigationBarButtonTap事件
> 通过修改titleNView的配置实现自定义按钮，titleNView设置有很多，详细api：[http://www.html5plus.org/doc/zh\_cn/webview.html#plus.webview.WebviewTitleNViewStyles](http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles)
> 提示：hello uni-app的中 模板 -> 顶部导航标题栏 有示例
> 页面监听代码如下：
~~~
export default {
data() {
return {}
},
onNavigationBarButtonTap() {
console.log("点击了自定义按钮");
}
}
~~~
> pages.json配置如下：
> buttons的text推荐使用字体图标
> 如果按钮使用的汉字或英文较长，推荐把字体改小一点，或者调节按钮宽度等值
> 配置button的背景颜色为透明：background:'rgba(0,0,0,0)'
~~~
{
"path": "pages/log/log",
"style": {
"navigationBarTitleText": "hello",
"app-plus": {
"titleNView": {
"buttons": [{
"text": "\ue534",
"fontSrc": "/static/uni.ttf",
"fontSize": "22px"
}]
}
}
}
}
~~~
### 导航栏带红点和角标
~~~
{
"path" : "nav-dot/nav-dot",
"style" : {
"navigationBarTitleText" : "导航栏带红点和角标",
"app-plus" : {
"titleNView" : {
"buttons" : [
{
"text" : "消息",
"fontSize" : "14",
"redDot" : true
},
{
"text" : "关注",
"fontSize" : "14",
"badgeText" : "12"
}
]
}
}
}
}
~~~
### 导航栏带下拉选择（城市选择）
~~~
{
"path" : "nav-city-dropdown/nav-city-dropdown",
"style" : {
"navigationBarTitleText" : "导航栏带城市选择",
"app-plus" : {
"titleNView" : {
"buttons" : [
{
"text" : "北京市",
"fontSize" : "14",
"select" : true,
"width" : "auto"
}
]
}
}
}
}
~~~
### 导航栏带搜索框
> 因代码较多，此处不列，请参考hello uni-app的 模板 -> 顶部导航标题栏示例。
### 透明渐变样式
> 原生导航栏还支持透明渐变效果，页面刚载入时没有导航标题，页面内容通顶到状态栏里，页面向下滚动后标题栏渐变出现。
~~~
{
"path": "pages/log/log",
"style": {
"navigationBarTitleText": "hello",
"app-plus": {
"titleNView": {
"type": "transparent"
}
}
}
}
~~~
### 导航栏带图片
> titleNView新版配置可以直接配图片，还支持Gif图。但这里提供一个黑科技写法，通过在titleNView里配置tags，可以实现导航栏绘制图片的效果：
> 通过配置 tags 除了可以绘制图片，还可以绘制更多丰富的内容，如：richtext（富文本）、font（文本）、input（输入框）、rect（矩形区域）。详情参考：[titleNView](http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles)、[tags](http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewDrawTagStyles)。
~~~
{
"path" : "nav-image/nav-image",
"style" : {
"app-plus" : {
"titleNView" : {
"titleText" : "",
"tags" : [
{
"tag" : "img",
"src" : "/static/nav.png",
"position" : {
"left" : "auto",
"top" : "auto",
"width" : "110px",
"height" : "26px"
}
}
]
}
}
}
}
~~~
## 通过setStyle方式动态修改原生导航栏样式
> 如果需要js动态修改导航栏，uni有跨端的api可修改标题、背景色、前景色。这部分是app、小程序、h5都支持的，参考[https://uniapp.dcloud.io/api/ui/navigationbar。](https://uniapp.dcloud.io/api/ui/navigationbar%E3%80%82)
> 对于app侧扩展的设置，比如自己添加的buttons，则需使用plus的js api来动态设置。在App端可以通过得到webview对象，通过setStyle方法重新设置，包括修改webview对象的titleNview属性，以达到修改标题栏按钮文字及样式的功能。具体参考：[https://ask.dcloud.net.cn/article/35374](https://ask.dcloud.net.cn/article/35374)
参考文档：
> [https://uniapp.dcloud.io/collocation/pages?id=style](https://uniapp.dcloud.io/collocation/pages?id=style)
> [https://ask.dcloud.net.cn/article/34921](https://ask.dcloud.net.cn/article/34921)
> 不错的导航栏插件：[https://ext.dcloud.net.cn/plugin?id=52](https://ext.dcloud.net.cn/plugin?id=52)
- 基础知识
- UNI核心介绍
- flex布局
- 生命周期
- 全局方法
- 组件定义
- 自定义组件
- 全局组件
- 组件之间的数据传输
- 条件编译
- 自定义头部
- 节点信息 (SelectorQuery)
- vuejs基础语法
- 页面跳转以及参数传递
- 事件的监听注册以及触发
- css3动画
- block的妙用
- mixin (混入)
- uniapp快捷键
- vuex状态管理
- 实用功能
- 获取服务提供商
- 启动页 / 启动界面
- 引导页
- tabbar配置
- 头部导航栏基础设置
- 上拉下拉（刷新/加载）
- 第三方登录
- 第三方分享
- 推送通知 之 unipush
- scroll-view双联动
- 配置iOS通用链接（Universal Links）
- 本地缓存操作
- 升级/更新方案
- 热更新
- 图片上传
- 搜索页实现
- canvas绘图助手
- 地图定位
- 第三方支付————todo
- 分类轮播
- 清除应用缓存
- uniapp与webview的实时通讯
- 视频-----todo
- 聊天----todo
- 长列表swiper左右切换
- 第三方插件
- uview
- mescroll
- uCharts (图表)
- 无名 (更新插件)
- 第三方模版
- 自定义基座
- 打包发行
- 要封装的方法
- 缓存 cache.js
- 请求接口 request.js
- 工具类 util.js
- 小程序登录 xcxLogin.js
- 版本更新 update.js
- 优质插件
- 更新插件----todo
- 语音
- 语音识别 (含上传)
- 百度语音合成播报接口
- 官方常用组建
- input 输入框
- image 图片
- audio 音频
- picker 选择器
- video 视频
- scroll-view 滚动视图
- uni-app 地图全解析+事件监听