uniapp在App端如何动态修改原生导航栏?
文章目录
-
- uniapp在App端如何动态修改原生导航栏?
-
- page.json配置
- [修改 buttons 文字](#修改 buttons 文字)
- 修改按钮上的角标
- [设置 searchInput的 focus](#设置 searchInput的 focus)
- [设置 searchInput的 text](#设置 searchInput的 text)
-
在App端可以通过得到
webview
对象,通过当前webview
对象的setTitleNViewButtonBadge
,setTitleNViewButtonStyle
,setTitleNViewSearchInputFocus
,setTitleNViewSearchInputText
分别对TitleNView
上的按钮角标,按钮,输入框等组件的样式进行修改。
page.json配置
- 举个例子,这里配置基本 buttons,根据需要自行配置,具体查看官方文档
json
{
"path": "pages/devices/devices",
"style": {
"navigationBarTitleText": "Device",
"enablePullDownRefresh": true,
"app-plus": {
"titleNView": {
"buttons": [{
"text": "Search",
"color": "#fff",
"fontSize": "18",
"width": 80,
"float": "right"
}]
}
}
}
},
修改 buttons 文字
javascript
// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview();
changeNavButtonText(text) {
// 0:按钮索引(index)
webView.setTitleNViewButtonStyle(0, {
text: text
});
}
// #endif
修改按钮上的角标
javascript
// index: 按钮索引, text: 角标文本内容
changeNavButtonBadge() {
webView.setTitleNViewButtonBadge({
index: 0,
text: 99,
});
}
设置 searchInput的 focus
javascript
// focus: true | false
webView.setTitleNViewSearchInputFocus(true)
设置 searchInput的 text
javascript
webView.setTitleNViewSearchInputText(text)