uni-app 原生导航栏tags属性绘制按钮

开发环境	版本号	项目创建方式
Windows	win10	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.5

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：任何型号

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

示例代码：

“titleNView”: { “tags” : [ { “tag” : “img”, “src” : “/static/mine/set.png”, “position” : { “right” : “52px”, “top” : “auto”, “width” : “21px”, “height” : “19px” } }, { “tag” : “img”, “src” : “/static/mine/service.png”, “position” : { “right” : “10px”, “top” : “auto”, “width” : “21px”, “height” : “20px” } } ],

操作步骤：




"titleNView": {
"tags" : [
{
"tag" : "img",
"src" : "/static/mine/set.png",
"position" : {
"right" : "52px",
"top" : "auto",
"width" : "21px",
"height" : "19px"
}
},
{
"tag" : "img",
"src" : "/static/mine/service.png",
"position" : {
"right" : "10px",
"top" : "auto",
"width" : "21px",
"height" : "20px"
}
}
],

预期结果：

使用tag绘制按钮之后，可以监听按钮的点击事件

实际结果：




使用tag绘制按钮之后，无法监听按钮的点击事件

bug描述：

系统导航栏设置tag属性之后，在导航栏绘制按钮，无法监听按钮的点击事件

更多关于uni-app 原生导航栏tags属性绘制按钮的实战教程也可以访问 https://www.itying.com/category-93-b0.html

h691938207 1楼

更多关于uni-app 原生导航栏tags属性绘制按钮的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在 uni-app 中，原生导航栏的 tags 属性用于绘制自定义按钮，但默认情况下这些按钮不具备点击事件监听功能。要实现点击事件，你需要为每个 tag 添加 id 属性，并在页面中通过 uni.onNavigationBarButtonTap 或 uni.onNavigationBarSearchInputClicked（针对搜索框）来监听点击。

根据你的代码，tags 中缺少 id 定义，导致无法识别点击事件。修改示例如下：

"titleNView": {
  "tags": [
    {
      "tag": "img",
      "id": "setBtn", // 添加唯一 id
      "src": "/static/mine/set.png",
      "position": {
        "right": "52px",
        "top": "auto",
        "width": "21px",
        "height": "19px"
      }
    },
    {
      "tag": "img",
      "id": "serviceBtn", // 添加唯一 id
      "src": "/static/mine/service.png",
      "position": {
        "right": "10px",
        "top": "auto",
        "width": "21px",
        "height": "20px"
      }
    }
  ]
}

在页面的 Vue 脚本中，使用 onNavigationBarButtonTap 监听点击：

export default {
  onNavigationBarButtonTap(e) {
    const { id } = e; // 获取点击按钮的 id
    if (id === 'setBtn') {
      console.log('设置按钮被点击');
      // 执行设置相关操作
    } else if (id === 'serviceBtn') {
      console.log('客服按钮被点击');
      // 执行客服相关操作
    }
  }
}