頭部導航欄基礎設置 · 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