uni-app 透明渐变导航栏升级HBuilderX后默认展示页面标题问题

uni-app 透明渐变导航栏升级HBuilderX后默认展示页面标题问题

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 11.5.2
HBuilderX类型 正式
HBuilderX版本号 3.2.7
手机系统 Android
手机系统版本号 Android 10
手机厂商 小米
手机机型 小米10
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

{
"path": "pages/detail/goodsinfo",
"style": {
"navigationBarTitleText": "商品详情",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": false,
"app-plus": {
"bounce": "none",
"scrollIndicator": "none",
"titleNView": {
"type": "transparent",
"buttons": [{
"type": "menu"
}]
}
}
}
}

操作步骤：

直接打开页面出现

预期结果：

默认 不显示标题

实际结果：

默认显示

bug描述：

页面顶部是商品图片，第一次打开默认会显示顶部的标题，商品详情。我通过滚动再次滑动到顶部就不会显示，就是第一次打开会显示，以前是不会有的，最近刚刚升级了HbuildX到最新的版本。


更多关于uni-app 透明渐变导航栏升级HBuilderX后默认展示页面标题问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

未复现此问题。可新建个空白项目测试下是否能复现此问题

更多关于uni-app 透明渐变导航栏升级HBuilderX后默认展示页面标题问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


模拟器是正常的，编译出来就不对了。

还有一个问题，首页设置了navigationBarTextStyle:white但是状态栏是黑色的，自定义的导航栏。

升级HBuilderX到3.2.7版本后，透明渐变导航栏首次加载时默认显示页面标题的问题，是由于新版对titleNView的渲染机制进行了调整。在旧版本中，"type": "transparent"会默认隐藏标题，但新版本可能改为初始显示，直到页面滚动触发样式更新。

要解决此问题，您可以通过在app-plus配置中显式设置titleNView的titleColor为透明色，强制初始状态隐藏标题。修改示例代码如下：

{
  "path": "pages/detail/goodsinfo",
  "style": {
    "navigationBarTitleText": "商品详情",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": false,
    "app-plus": {
      "bounce": "none",
      "scrollIndicator": "none",
      "titleNView": {
        "type": "transparent",
        "titleColor": "rgba(0,0,0,0)", // 设置初始标题颜色为完全透明
        "buttons": [{
          "type": "menu"
        }]
      }
    }
  }
}
回到顶部