效果图:

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

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐