uniapp顶部导航栏添加自定义按钮和操作

效果图：

1.pages.json中作如下配置:

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "住房安全保障检查表",
                "app-plus":{
                    "titleNView":{
                        "buttons":[
                            {
                                "text":"提交",
                                "type":"none",
                                "color":"#007AFF",
                                "background":"#000000",
                                "fontSize":"16px",
                                "float":"left"
                            },
                            {
                                "text":"保存",
                                "type":"none",
                                "color":"#007AFF",
                                "background":"#000000",
                                "fontSize":"16px"
                            }
                        ]
                    }
                }
            }
        }
    ],

2、点击事件的执行

在页面添加onNavigationBarButtonTap 事件，可以获取到配置内容，如下所示： 

onNavigationBarButtonTap:function(e){
                console.log(e.text);//提交

                console.log(e.fontSize);//16px
 }

如果需要配置全局的，则在globalStyle添加"app-plus"，如下所示：

"globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",

         "app-plus":{
                    "titleNView":{
                        "buttons":[
                            {
                                "text":"提交",
                                "type":"none",
                                "color":"#007AFF",
                                "background":"#000000",
                                "fontSize":"16px",
                                "float":"left"
                            }
                        ]
                    }
                }
    },

参见：

https://uniapp.dcloud.io/collocation/pages?id=app-plus 

https://blog.csdn.net/sky_sunshine_x/article/details/106048222