在App端可以通过得到webview对象,通过当前 webview 对象的 setTitleNViewButtonBadge, setTitleNViewButtonStyle, setTitleNViewSearchInputFocus,setTitleNViewSearchInputText 分别对 TitleNView 上的按钮角标,按钮,输入框等组件的样式进行修改。
对于 searchInput 还支持: 通过 webview的getStyle(),得到一个json对象,然后用json的.来获取titleNView,拿到的还是json对象,然后修改json对象,再用webview的setstyle方法把这个json对象赋值进去。
具体实现如下:
// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview();
// 修改buttons
// index: 按钮索引, style {WebviewTitleNViewButtonStyles }
webView.setTitleNViewButtonStyle(0, {
text: 'hello',
});
// 修改按钮上的角标
// index: 按钮索引, text: 角标文本内容
webView.setTitleNViewButtonBadge({
index: 0,
text: 10,
});
// 设置 searchInput的 focus
// focus: true | false
webView.setTitleNViewSearchInputFocus(true)
// 设置 searchInput的 text
webView.setTitleNViewSearchInputText(text)
// searchInput 通过 webview 的 setStyle 方法进行更新
var tn = currentWebview.getStyle().titleNView;
if (tn.buttons) {
uni.getSystemInfo({
success:function(res){
if (res.platform=="ios") { // 这里在HBuilderX 1.9.9版本有个bug,searchInput的I变小写了 ,临时绕过下。更高版本会修复此bug
tn.searchinput.placeholder = 'test';
currentWebview.setStyle({
titleNView: tn
});
} else{
tn.searchInput.placeholder = 'test'; //这里有个已知bug,HBuilderX 1.9.9上,当searchInput位于首页时,动态设置placehold会导致buttons的点击事件消失。更高版本会修复此bug
currentWebview.setStyle({
titleNView: tn
});
}
}
})
}
// #endif
参考这个原理,可以任意修改titleNView的所有内容,titleNView的style内容详见:
https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles
button的相关属性参考:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewButtonStyles
searchInput的相关属性参考:https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewSearchInputStyles
附件为测试buttons的demo,可下载体验。