原生导航自定义按钮

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. 效果展示

h5端字体图标正常.png

app端字体图标异常.png

疑问：在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"
}