添加自定義按鈕
注意：按鈕的點(diǎn)擊事件需要在頁面監(jiān)聽onNavigationBarButtonTap事件
頁面監(jiān)聽代碼如下：
復(fù)制代碼exportdefault{? ? ? data() {return{}? ? ? },? ? ? onNavigationBarButtonTap() {console.log("點(diǎn)擊了自定義按鈕");? ? ? }? }
pages.json配置如下：
復(fù)制代碼{"path":"pages/log/log","style": {"navigationBarTitleText":"hello","app-plus": {"titleNView": {"buttons": [{"text":"\ue534","fontSrc":"/static/uni.ttf","fontSize":"22px"}]? ? ? ? ? ? ? }? ? ? ? ? }? ? ? }? }
buttons的text推薦使用字體圖標(biāo)先壕。
如果按鈕使用的漢字或英文較長晕翠，推薦把字體改小一點(diǎn)蓖宦，或者調(diào)節(jié)按鈕寬度志于、padding等值碍岔。
配置button的背景顏色為透明：background:'rgba(0,0,0,0)'
自定義按鈕帶紅點(diǎn)和角標(biāo)
復(fù)制代碼{"path":"nav-dot/nav-dot","style": {"navigationBarTitleText":"導(dǎo)航欄帶紅點(diǎn)和角標(biāo)","app-plus": {"titleNView": {"buttons": [? ? ? ? ? ? ? ? ? ? ? {"text":"消息","fontSize":"14","redDot":true},? ? ? ? ? ? ? ? ? ? ? {"text":"關(guān)注","fontSize":"14","badgeText":"12"}? ? ? ? ? ? ? ? ? ]? ? ? ? ? ? ? }? ? ? ? ? }? ? ? }? }
自定義按鈕帶下拉選擇（城市選擇）
復(fù)制代碼{"path":"nav-city-dropdown/nav-city-dropdown","style": {"navigationBarTitleText":"導(dǎo)航欄帶城市選擇","app-plus": {"titleNView": {"buttons": [? ? ? ? ? ? ? ? ? ? ? {"text":"北京市","fontSize":"14","select":true,"width":"auto"}? ? ? ? ? ? ? ? ? ]? ? ? ? ? ? ? }? ? ? ? ? }? ? ? }? }
導(dǎo)航欄上的原生搜索框
原生導(dǎo)航欄支持放置原生搜索框扎运，可點(diǎn)擊直接彈出軟鍵盤账月，也可以點(diǎn)擊后跳轉(zhuǎn)到新頁面搜索祖能。
因代碼較多蟆沫，此處不列籽暇，請參考hello uni-app的模板-頂部導(dǎo)航標(biāo)題欄示例。
配置透明漸變導(dǎo)航欄
原生導(dǎo)航欄還支持透明漸變效果饭庞，頁面剛載入時(shí)沒有導(dǎo)航標(biāo)題戒悠，頁面內(nèi)容通頂?shù)綘顟B(tài)欄里，頁面向下滾動后標(biāo)題欄漸變出現(xiàn)舟山。
復(fù)制代碼{"path":"pages/log/log","style": {"navigationBarTitleText":"hello","app-plus": {"titleNView": {"type":"transparent"}? ? ? ? ? }? ? ? }? }
實(shí)際上可用的titleNView設(shè)置還有很多绸狐，詳細(xì)的api見http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles
透明漸變的導(dǎo)航欄的button圖標(biāo)有一個(gè)默認(rèn)的灰色背景圈，防止背景圖和按鈕前景顏色相同導(dǎo)致按鈕無法看清累盗。如果要去掉這個(gè)灰色背景圖寒矿，可以配置button的背景顏色為透明：background:'rgba(0,0,0,0)'
導(dǎo)航欄繪制圖片
通過在titleNView里配置tags，可以實(shí)現(xiàn)導(dǎo)航欄繪制圖片的效果：
復(fù)制代碼{"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"}? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ]? ? ? ? ? ? ? }? ? ? ? ? }? ? ? }? }
通過配置 tags 除了可以繪制圖片若债，還可以繪制更多豐富的內(nèi)容符相，如：richtext（富文本）、font（文本）、input（輸入框）啊终、rect（矩形區(qū)域）镜豹。詳情參考：titleNView、tags蓝牲。
通過setStyle方式動態(tài)修改導(dǎo)航欄樣式
如果需要js動態(tài)修改導(dǎo)航欄趟脂，uni有跨端的api可修改標(biāo)題、背景色例衍、前景色昔期。這部分是app、小程序肄渗、h5都支持的镇眷，參考https://uniapp.dcloud.io/api/ui/navigationbar。
對于app側(cè)擴(kuò)展的設(shè)置翎嫡，比如自己添加的buttons欠动，則需使用plus的js api來動態(tài)設(shè)置。在App端可以通過得到webview對象惑申，通過setStyle方法重新設(shè)置具伍，包括修改webview對象的titleNview屬性，以達(dá)到修改標(biāo)題欄按鈕文字及樣式的功能圈驼。
