公司年会视频制作模板广州网站seo推广

uniapp在App端如何动态修改原生导航栏？

• 在App端可以通过得到 webview 对象，通过当前 webview 对象的 setTitleNViewButtonBadge， setTitleNViewButtonStyle， setTitleNViewSearchInputFocus，setTitleNViewSearchInputText 分别对 TitleNView 上的按钮角标，按钮，输入框等组件的样式进行修改。

page.json配置

• 举个例子，这里配置基本 buttons，根据需要自行配置，具体查看官方文档

{"path": "pages/devices/devices","style": {"navigationBarTitleText": "Device","enablePullDownRefresh": true,"app-plus": {"titleNView": {"buttons": [{"text": "Search","color": "#fff","fontSize": "18","width": 80,"float": "right"}]}}}
},

修改 buttons 文字

// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview();
changeNavButtonText(text) {// 0：按钮索引(index)webView.setTitleNViewButtonStyle(0, {text: text});
}
// #endif

修改按钮上的角标

// index: 按钮索引, text: 角标文本内容
changeNavButtonBadge() {webView.setTitleNViewButtonBadge({index: 0,text: 99,});
}

设置 searchInput的 focus

// focus: true | false  
webView.setTitleNViewSearchInputFocus(true)  

设置 searchInput的 text

webView.setTitleNViewSearchInputText(text)

参考文章