uni-app HB3.4.7 nvue 内页 pages.json配置transparentTitle为auto无效

uni-app HB3.4.7 nvue 内页 pages.json配置transparentTitle为auto无效

测试过的手机

锤子，小米，iphone12

示例代码

{
"path" : "pages/community/index",
"style" :{
"navigationBarTitleText": "",
"navigationBarTextStyle":"black",
"transparentTitle": "auto",
"app-plus": {
"titleNView":{
"autoBackButton": "false",
"titleSize": "18px",
"coverage":"32px",
"buttons": [{
"color": "#FFFFFF",
"float": "left",
"fontSize": "22px",
"width": "48px",
"fontSrc": "/static/font/iconfont.ttf",
"background":"rgba(255,255,255,0)",
"text": "\ue60e"
}, {
"color": "#FFFFFF",
"float": "right",
"fontSize": "22px",
"width": "60px",
"background":"rgba(255,255,255,0)",
"fontSrc": "/static/font/iconfont.ttf",
"text": "\ue661"
}]
},
"subNVues": [{
"id": "actionMoreCommunityDetail",
"path": "pages/subview/action-more.nvue",
"type": "popup",
"style": {
"position": "absolute",
"bottom": "0",
"height": "230px",
"background": "transparent"
}
}],
"backgroundColor": "#FFFFFF"
}
}

操作步骤

无需重复

预期结果

导航栏透明随滚动条变化

实际结果

页面停留顶部时，导航栏背景透明了，标题却显示着。页面下滑之后，导航栏无任何变化。

bug描述

HB3.4.7 nvue 内页 pages.json配置transparentTitle为auto无效。 内页和switchTab页配置一样，tab页有效，内页无效。 页面停留顶部时，导航栏背景透明了，标题却显示着。页面下滑之后，导航栏无任何变化。 3.4.6就已出现，之前版本3.3.14是好的


| 信息类别         | 信息内容               |
|------------------|------------------------|
| 产品分类         | uniapp/App             |
| PC开发环境       | Mac                    |
| PC操作系统版本   | 10.14.6                |
| HBuilderX类型    | 正式                   |
| HBuilderX版本    | 3.4.7                  |
| 手机系统         | 全部                   |
| 页面类型         | nvue                   |
| Vue版本          | vue2                   |
| 打包方式         | 云端                   |
| 项目创建方式     | HBuilderX              |
| App下载地址      | [https://a.app.qq.com/o/simple.jsp?pkgname=com.butongapp.butong](https://a.app.qq.com/o/simple.jsp?pkgname=com.butongapp.butong) |

更多关于uni-app HB3.4.7 nvue 内页 pages.json配置transparentTitle为auto无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

请提供简单、可稳定复现、能直接运行的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app HB3.4.7 nvue 内页 pages.json配置transparentTitle为auto无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


复现demo已上传

list是区域滚动，不会触发页面滚动，不支持pages.json配置的transparentTitle导航栏透明。

在 uni-app 中，nvue 页面的 pages.json 配置中，transparentTitle 属性用于设置页面导航栏的透明度。transparentTitle 可以设置为 "always"、"auto" 或 "none"。

  • "always"：导航栏始终透明。
  • "auto"：导航栏在页面滚动时自动变为透明。
  • "none"：导航栏不透明。

如果你在 nvue 页面中设置了 transparentTitle 为 "auto" 但无效，可能是以下原因导致的：

1. nvue 页面的特殊性

nvue 页面是基于原生渲染的，与 vue 页面的渲染方式不同。某些 pages.json 配置在 nvue 页面中可能不完全支持或表现不一致。

2. 页面结构问题

确保你的页面内容有足够的滚动内容，transparentTitle 为 "auto" 时，导航栏的透明度会根据页面滚动情况变化。如果页面内容不足以触发滚动，导航栏可能不会变为透明。

3. pages.json 配置问题

确保 pages.json 中的配置正确，例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "transparentTitle": "auto"
      }
    }
  ]
}
回到顶部