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)
参考文章