uni-appuin-appuni-app交流圈

原生导航自定义按钮

2019-08-13  本文已影响0人  瑟闻风倾

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"
                            }
                        ]
                    }
                }
            }
        }

参考自定义按钮
注意

.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端打印信息

{
  "float": "right",
  "fontSrc": "/h5/colorui/font_533566_yfq2d9wdij.ttf",
  "text": "",
  "width": "150px",
  "index": 1,
  "type": "none",
  "fontFamily": "font1565686878537",
  "color": "#fff",
  "fontSize": "27px",
  "fontWeight": "normal"
}
上一篇下一篇

猜你喜欢

热点阅读