uniapp自定义导航栏返回按钮及点击事件（附示例demo可免费下载）

最新推荐文章于 2025-03-29 22:23:31 发布

置顶良纵

最新推荐文章于 2025-03-29 22:23:31 发布

阅读量2.9w

点赞数 3

本文链接：https://blog.csdn.net/qq_33807889/article/details/89945674

版权

该博客主要介绍了Uniapp开发中按钮显示与点击事件设置的步骤。首先在pages.json中修改页面配置以显示图标或文字按钮，图标参考特定链接，也可直接写文字。然后在页面中添加代码设置点击事件，还提供了demo、git链接及联系方式。

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

第一步：显示按钮

假设页面名称为：AddSort

在pages.json中找到AddSort，

{
 "path" : "pages/manageDetail/good/sortManage/AddSort/AddSort",
}

将它改为：

{
  "path" : "pages/manageDetail/good/sortManage/AddSort/AddSort",
  "style" : {
      "navigationBarTitleText" : "添加分类",
      "app-plus": {
          "bounce": "none", //关闭窗口回弹效果
          "titleNView": {
              "buttons": [ //原生标题栏按钮配置,
                  {
           		    "type":"none",
           		    "text":"\u2713",
           		    "float":"right"
                  }
               ]
           }
       }
  }
}

其中style.app-plus.titleNView.buttons.text字段想要什么图标参考：https://blog.csdn.net/qq_33807889/article/details/89493496

不想要图标直接写文字也可以。

这时候在页面中就可以显示出图标（或文字）了。

第二步，设置点击事件

在AddSort页面中添加如下代码（与data和onload同级）：

onNavigationBarButtonTap(e) {
	console.log("success")		
},

uniapp自定义导航栏返回按钮及点击事件（附示例demo可免费下载）

第一步：显示按钮

第二步，设置点击事件

demo:https://download.csdn.net/download/qq_33807889/12269390

git: https://github.com/ChinaLiuRixing/uniappNavigator

@wx:qq981145483（备注:csdn）