uniapp在App端如何动态修改原生导航栏？
uniapp在App端如何动态修改原生导航栏？
文章目录
- uniapp在App端如何动态修改原生导航栏？
- page.json配置
- 修改 buttons 文字
- 修改按钮上的角标
- 设置 searchInput的 focus
- 设置 searchInput的 text
- 在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)
参考文章