添加自定义按钮
按钮的点击事件需要在页面监听onNavigationBarButtonTap事件
页面监听代码如下:
exportdefault{
data() {
return{}
},
onNavigationBarButtonTap() {
console.log("点击了自定义按钮");
} }
pages.json配置如下:
{
"path":"pages/log/log",
"style": {
"navigationBarTitleText":"hello",
"app-plus": {
"titleNView": {
"buttons": [{
"text":"\ue534",
"fontSrc":"/static/uni.ttf",
"fontSize":"22px"
}]
}
}
}
}
buttons的text推荐使用字体图标。
如果按钮使用的汉字或英文较长,推荐把字体改小一点,或者调节按钮宽度、padding等值。
配置button的背景颜色为透明:background:'rgba(0,0,0,0)'
自定义按钮带红点和角标
{"path":"nav-dot/nav-dot",
"style": {
"navigationBarTitleText":"导航栏带红点和角标",
"app-plus": {
"titleNView": {
"buttons": [
{
"text":"消息",
"fontSize":"14",
"redDot":true
},
{"text":"关注",
"fontSize":"14",
"badgeText":"12"
}
]
}
}
}
}
// #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
##### 修改导航栏信息
onReady() {
let buttons = '按钮'
//buttons = '\ue670' 如果是字体图标需要引入ttf文件
// #ifdef APP-PLUS
var currentWebview = this.$mp.page.$getAppWebview();
console.log(currentWebview)
var tn = currentWebview.getStyle().titleNView;
tn.buttons[0].text = buttons; //[0] 按钮的下标
currentWebview.setStyle({
titleNView: tn
});
// #endif
}