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

最新推荐文章于 2025-07-07 16:36:45 发布

一名写前端的GISer

最新推荐文章于 2025-07-07 16:36:45 发布

阅读量1.9w

点赞数 9

CC 4.0 BY-SA版权

分类专栏： uniapp

本文链接：https://blog.youkuaiyun.com/wangchaohpu/article/details/107320015

uniapp 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍如何在uni-app中配置导航栏按钮，包括在pages.json中设置按钮样式及点击事件，以及如何通过onNavigationBarButtonTap事件获取按钮配置信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

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