1.修改导航栏buttons
如图动态修改角标
<template>
<view>
</view>
</template> <script>
export default {
data(){
return{
}
},
//监听头部导航红点事件
onNavigationBarButtonTap(e) {
if(e.index==0){//系统消息
uni.navigateTo({
url:"../news/news"
})
}
},
mounted(){
//动态设置导航栏角标，0为从右往左数第一个，true显示还是隐藏角标或者红点，最后一个显示角标为多少
this.setStyle(0,false,'');
},
methods:{
/**
* 修改导航栏buttons
* index[number] 修改的buttons 下标索引，最右边索引为0
* show[boolean] 显示还是隐藏角标或者红点
* text[string] 需要修改的角标的text 内容 ，如果定义redDot 此参数无效 ，如果定义badgeText请设置具体，如果不用输入
*/
setStyle(index, show,text) {
let pages = getCurrentPages();
let page = pages[pages.length - 1];
// #ifdef APP-PLUS
let currentWebview = page.$getAppWebview();
if(show){
if(index === 0){
currentWebview.setTitleNViewButtonBadge({index:index,text:text})
}else{
currentWebview.showTitleNViewButtonRedDot({index:index,text:text})
}
}else{
if(index === 0){
currentWebview.removeTitleNViewButtonBadge({index:index})
}else{
currentWebview.hideTitleNViewButtonRedDot({index:index})
}
} // #endif
},
}
}
</script> <style scoped="scoped" lang="scss"></style>
下面是官方demo实例方法
// #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