1. pages.json中配置
{
"path" : "pages/mes/check/check",
"style" : {
"app-plus": {
"titleNView": {
"buttons": [ //原生标题栏按钮配置,
{
"type":"none",
"float":"left",
"fontSrc":"/colorui/font_533566_yfq2d9wdij.ttf",
"text": "\ue689", //点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
"width":"150px"
},
{
"type":"none",
"float":"right",
"fontSrc":"/colorui/font_533566_yfq2d9wdij.ttf",
"text": "\ue7cb", //点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
"width":"150px"
}
]
}
}
}
}
参考
:自定义按钮
注意
:
- fontSrc需为本地字体图标库。项目中采用colorui的icon.css, 对应 字体图标下载地址。
- 下载完毕后导入项目文件夹下(本人在colorui目录下)
- 之后需在icon.css中添加如下样式,否则图标无法显示(实战遇到的问题也可能和我不一样)
.uni-btn-icon{
font-family: "cuIcon" !important;
}
2. 效果展示


疑问
:在app端字体图标未找到(自定义基座模式下运行)。
3. 监听原生标题栏按钮点击事件(参数为Object)
onNavigationBarButtonTap:function(buttonsOj){
console.log("onNavigationBarButtonTap:" + JSON.stringify(buttonsOj));
if(buttonsOj.index == 0){
uni.showToast({
title:"点击了左边按钮"
})
}else if(buttonsOj.index == 1){
uni.showToast({
title:"点击了右边按钮"
})
}
}
(1) app端打印信息
- 左边按钮
{
"float": "left",
"fontSrc": "/colorui/font_533566_yfq2d9wdij.ttf",
"text": "",
"width": "150px",
"index": 0,
"__cb__": {
"id": "plus211565686623737",
"htmlId": "__uniapp__service"
},
"type": "none"
}
- 右边按钮
{
"float": "right",
"fontSrc": "/colorui/font_533566_yfq2d9wdij.ttf",
"text": "",
"width": "150px",
"index": 1,
"__cb__": {
"id": "plus221565686623737",
"htmlId": "__uniapp__service"
},
"type": "none"
}
(2) h5端打印信息
- 左边按钮
疑问
:在h5端点击左边按钮无响应。 - 右边按钮
{
"float": "right",
"fontSrc": "/h5/colorui/font_533566_yfq2d9wdij.ttf",
"text": "",
"width": "150px",
"index": 1,
"type": "none",
"fontFamily": "font1565686878537",
"color": "#fff",
"fontSize": "27px",
"fontWeight": "normal"
}
网友评论