UNIAPP----修改原生导航栏样式，加图标，加文字，加点击事

uniapp或者uview的导航栏无法满足需求时，可用下面方法。

首先去掉原生导航。

"navigationStyle": "custom",

下面这段是图标代码，添加文字代码在第二个片段。

image.png

可改左右，大小，宽度等官网也有实例

 {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "英语",
                "navigationStyle": "custom",
                "app-plus": {
                    // "bounce": "none",
                    "titleNView": {
                        "buttons": [{
                            "text": "\uF3B0",
                            "fontSrc": "/static/MyFlutterApp.ttf",
                            "fontSize": "25px",
                            "float": "left",
                            "width": "65px"
                        }, {
                            "text": "\uEA07",
                            "fontSrc": "/static/MyFlutterApp.ttf",
                            "fontSize": "25px",
                            "float": "right",
                            "width": "65px"
                        }]
                    }
                }
            }
        }

重点：找到ttf文件，http://font.qqe2.com/index.html 在线打开ttf文件，找到 换成 \uF101 即可。

如果是你想要导航栏右侧的文字，那么看下面代码

{
            "path": "pages/mine/set/myaddress/index",
            "style": {
                "navigationBarTitleText": "地址簿",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom",
                "app-plus": {
                    "titleNView": {
                        "buttons": [{
                            "text": "新增地址",
                            "color": "#505050",
                            "fontSize": "14px",
                            "width": "88px"
                        }]
                    }
                }
            }
 
        }

上面这段代码就是导航栏添加 “新增地址”文字。

然后得获取到用户点击呀

onNavigationBarButtonTap(e){
        console.log(e)   
//如果是俩图标的话，index然后的0 或者1  就知道点击的哪个
    },

image.png

这个方法适合onload的周期同级别的