uniapp导航栏自定义按钮及点击事件

本文链接：https://blog.****.net/qq_33807889/article/details/89945674
第一步：显示按钮
假设页面名称为：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.****.net/qq_33807889/article/details/89493496

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

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

标题

第二步，设置点击事件
在AddSort页面中添加如下代码（与data和onload同级）：

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

uniapp导航栏自定义按钮及点击事件

相关推荐