头部导航栏基础设置 · uniapp

> 原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。 > 更多功能参考此示例：https://ext.dcloud.net.cn/plugin?id=1765 [TOC] ## 原生导航栏的通用配置 > 原生通用配置：即小程序、APP、H5都通用的配置，修改pages.json，page>style(单个页面设置)或者globalStyle(全局设置)中进行navigationBar相关配置 > 参考 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 ## 去除原生导航栏 > 修改pages.json，page>style(单个页面设置)或者globalStyle(全局设置)中将navigationStyle(默认default)修改为custom > 被设置为custom的页面，没有了原生导航，则需要开发者使用view自行绘制导航栏 ``` "globalStyle": { "navigationStyle": "custom" } ``` ## 去除原生导航栏后自绘导航栏 > 通过绘制一个占位的view固定放在状态栏 > uni-app提供了一个状态栏高度的css变量，具体参考：https://uniapp.dcloud.io/frame?id=css%E5%8F%98%E9%87%8F > 推荐使用第三方组件 (当然优先推荐使用原生，性能更好) > 1. https://ext.dcloud.net.cn/plugin?id=974 > 2. https://ext.dcloud.net.cn/plugin?id=52 ~~~  <view class="status_bar"> <view class="top_view"></view> </view>  ~~~ ~~~ .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 > 提示：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。 > 对于app侧扩展的设置，比如自己添加的buttons，则需使用plus的js api来动态设置。在App端可以通过得到webview对象，通过setStyle方法重新设置，包括修改webview对象的titleNview属性，以达到修改标题栏按钮文字及样式的功能。具体参考：https://ask.dcloud.net.cn/article/35374 参考文档： > https://uniapp.dcloud.io/collocation/pages?id=style > https://ask.dcloud.net.cn/article/34921 > 不错的导航栏插件：https://ext.dcloud.net.cn/plugin?id=52