uni-app中titleNView下的tags不显示的问题

希望在导航栏设置图片，按官方教程https://ask.dcloud.net.cn/article/34921提到的来写

但实际打开h5后并没有显示图片，请问我的配置是哪里有问题吗？

我的page.json部分如下

{
    "path": "pages/index/index",
    "style": {
        // #ifdef MP
        "navigationBarTitleText": "导航栏标题",
        //"navigationStyle": "custom",
        // #endif
        "enablePullDownRefresh": true,
        "app-plus": {
            "titleNView": {
                "titleSize": "0px",
                "type": "transparent",
                "tags": [
                    {
                        "id": "abc",
                        "tag": "img",
                        "src": "/static/logo.png",
                        "position": {
                            "left": "0px",
                            "top": "0px",
                            "width": "110px",
                            "height": "26px"
                        }
                    }
                ],
                "buttons": [
                    {
                        "fontSrc": "/static/yticon.ttf",
                        "text": "\ue744",
                        "fontSize": "27",
                        "color": "#303133",
                        "background": "rgba(0,0,0,0)",
                        "redDot": false
                    }
                ]
            }
        }
    }
}

更多关于uni-app中titleNView下的tags不显示的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 1楼

更多关于uni-app中titleNView下的tags不显示的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在uni-app中，titleNView 是用于自定义导航栏的一个组件，而其中的 tags 属性通常用于显示标签。如果你遇到了 tags 不显示的问题，可能是由多种原因导致的。以下是一些可能的原因和相应的代码示例，帮助你排查和解决问题。

1. 确认 `titleNView` 配置正确

首先，确保你的 pages.json 中对应页面的 titleNView 配置正确。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "",
        "titleNView": {
          "autoBackButton": false,
          "tags": [
            {
              "text": "标签1"
            },
            {
              "text": "标签2"
            }
          ]
        }
      }
    }
  ]
}

2. 使用条件编译

如果你在不同的平台（如H5、小程序、App等）上遇到了显示问题，可能是因为某些平台不支持 tags 属性。虽然uni-app官方文档通常会有明确的支持说明，但你可以通过条件编译来针对特定平台做适配：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "",
        "#ifdef APP-PLUS": {
          "titleNView": {
            "autoBackButton": false,
            "tags": [
              {
                "text": "标签1"
              },
              {
                "text": "标签2"
              }
            ]
          }
        }
      }
    }
  ]
}

3. 检查CSS样式冲突

有时候，自定义的CSS样式可能会影响到 titleNView 的显示。确保没有全局样式或者页面样式覆盖到了导航栏的标签部分。你可以尝试移除或修改相关CSS规则来查看效果。

4. 使用原生导航栏（针对App平台）

如果你在App平台上仍然无法解决问题，可以考虑使用原生导航栏，并通过JS API来控制标签的显示。这通常涉及到更复杂的原生开发，但可以提供更高的自定义灵活性。

5. 查看控制台日志

最后，不要忘记查看开发者工具的控制台日志，看看是否有任何相关的错误信息或警告，这可能会给你提供一些线索。