uni-app pages.json的borderStyle参数设置了white但显示还是黑色

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app pages.json的borderStyle参数设置了white但显示还是黑色

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

win10

HBuilderX类型：

正式

HBuilderX版本号：

4.29

手机系统：

Android

手机系统版本号：

Android 13

手机厂商：

小米

手机机型：

mi10

页面类型：

vue

vue版本：

vue3

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

{
    "tabBar": {
        "backgroundColor": "#fff",
        "borderStyle": "white",
        "height": "60px",
        "iconWidth": "24px",
        "list": [
            {
                "iconPath": "static/tabbar/home.png",
                "selectedIconPath": "static/tabbar/home_active.png",
                "pagePath": "pages/index/index"
            },
            {
                "iconPath": "static/tabbar/news.png",
                "selectedIconPath": "static/tabbar/news_active.png",
                "pagePath": "pages/news/index"
            },
            {
                "iconPath": "static/tabbar/user.png",
                "selectedIconPath": "static/tabbar/user_active.png",
                "pagePath": "pages/user/index"
            }
        ]
    }
}

操作步骤：

{
    "tabBar": {
        "backgroundColor": "#fff",
        "borderStyle": "white",
        "height": "60px",
        "iconWidth": "24px",
        "list": [
            {
                "iconPath": "static/tabbar/home.png",
                "selectedIconPath": "static/tabbar/home_active.png",
                "pagePath": "pages/index/index"
            },
            {
                "iconPath": "static/tabbar/news.png",
                "selectedIconPath": "static/tabbar/news_active.png",
                "pagePath": "pages/news/index"
            },
            {
                "iconPath": "static/tabbar/user.png",
                "selectedIconPath": "static/tabbar/user_active.png",
                "pagePath": "pages/user/index"
            }
        ]
    }
}

预期结果：

按照文档正确显示

实际结果：

都显示黑色

bug描述：

pages.json的borderStyle参数 设置了white，但是显示还是黑色

Image Image


Harmonyos Next教程
2 回复

提供下 vue 版本和 HBuilderX 版本，经过我测试 borderstyle=white， vue3+HBuilderX alpha 4.31 运行到 ios 模拟器是 ok 的


在 uni-app 中，pages.json 文件用于配置页面的路由、导航条、选项卡等属性。其中，borderStyle 参数通常用于设置窗口的边框样式，特别是在 iOS 设备上控制导航栏下方的线条颜色。这个参数在 pages.json 中一般是配置给页面窗口的，而不是直接用于页面的内容显示。

如果你发现 borderStyle 设置为 white 后，显示仍然是黑色，可能是由以下几个原因造成的：

  1. 配置位置不正确：确保你的 borderStyle 配置在了正确的位置，通常是在 window 对象下。

  2. 系统或版本问题：不同版本的 uni-app 或不同版本的操作系统可能对 borderStyle 的支持有所不同。

  3. 其他样式覆盖：可能存在其他样式或代码覆盖了你的设置。

  4. 误解参数作用：borderStyle 主要用于控制导航栏下方的线条颜色，而不是用于页面内容的边框颜色。

下面是一个 pages.json 中正确配置 borderStyle 的示例：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "app-plus": {
          "titleNView": false,
          "autoBackButton": true,
          "window": {
            "borderStyle": "white"
          }
        }
      }
    }
    // 其他页面配置...
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniApp",
    "navigationBarBackgroundColor": "#FFFFFF",
    "backgroundColor": "#F8F8F8"
  }
}

注意几点：

  • borderStyle 是放在 app-plus 下的 window 对象里。
  • borderStyle 的值通常只有 black 和 white 两种选择，用于控制 iOS 设备上导航栏下方的线条颜色。
  • 如果你是在 Android 设备或模拟器上看到黑色边框，borderStyle 可能不会有任何效果，因为这个参数是特定于 iOS 的。

如果上述配置仍然无法解决问题，建议检查以下几点：

  • 确保你使用的 uni-app 版本支持该参数。
  • 查看是否有其他全局或页面级别的样式覆盖了你的设置。
  • 如果是在模拟器或真机上测试，尝试清除缓存或重启应用。

如果问题依然存在，可能需要考虑是否是系统级的问题或者是 uni-app 的一个 bug，此时可以查阅官方文档或社区寻求更多帮助。

回到顶部