2***@qq.com
2***@qq.com
  • 发布:2020-06-22 10:10
  • 更新:2021-04-16 15:38
  • 阅读:2004

【报Bug】globalStyle 设置 app-plus background设置颜色 不生效!!!

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.7.14

手机系统: Android

手机系统版本号: Android 7.1.1

手机厂商: 平板 QUAD_CORE

手机机型: A64 p3

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
"globalStyle": {  
        "navigationBarTextStyle": "white",  
        "navigationBarBackgroundColor": "#141436",   
        "backgroundColor": "#141436",  
        "app-plus": {  
            "background": "#212131",  
            "animationAlphaBGColor": "#141436",  
            "animationType":"pop-in"  
        }  

    }  

预期结果:

"background": "#212131",生效

实际结果:

依旧为#FFFFFF

bug描述:

globalStyle 设置 app-plus background设置颜色 不生效 只有设置成 transparent 才生效

2020-06-22 10:10 负责人:无 分享
已邀请:
神奇的兔子

神奇的兔子

反复测试后发现是应该是官方文档有误,使用backgroundColor才有效,并且backgroundColorTop和backgroundColorBottom会覆盖backgroundColor
需要注意的是,以上操作在nvue一切正常,但是在vue页面,body默认是白色的,也就是说vue页面默认body有背景颜色并且是白色的,解决方法如下:
1、在app.vue中设置body背景透明

/* #ifndef APP-NVUE */  
body{  
    background-color: rgba(0,0,0,0);  
}  
/* #endif */  

2、但是依然有问题,这样会导致浏览器调试的界面背景依然是白色,如果不开发H5页面的话,这种方法一劳永逸,如果发布H5版本建议在每个页面增加如下样式,不过未测试这种不加scoped会不会对其他页面有影响,随便看了几个页面没发现影响

<style>  
    page {  
        background: #f73944;  
    }   
</style>

3、再有一种办法是在app.vue中设置body透明之后,再通过clss控制body样式,参考下面
注意看class pages-my-Home 这个名称应该是根据pages.json中页面路径生成的
这样做的好处是nvue和vue页面不管是在h5页面还是APP页面都可以解决问题,并且多个相同背景颜色的页面可以通过选择器分组来控制背景

/* #ifndef APP-NVUE */  
    body {  
        background-color: rgba(0, 0, 0, 0);  
    }  
    .pages-my-Home {  
        background: #009EA1;  
    }  
    /* #endif */

以上结论未运行在各种小程序上,仅测试了H5和APP,并且测试并不严格,请自行测试

  • 神奇的兔子

    纠正一下,这个只测试了ios平台,今天发现在Android平台无效,抱歉,还是求官方解决吧

    2021-06-18 12:40

神奇的兔子

神奇的兔子

ios也不生效,求官方解决

8***@qq.com

8***@qq.com

这个属性使用频率特别高,求官方解决

神奇的兔子

神奇的兔子

官方有回复吗,这个BUG比较烦,不好解决

该问题目前已经被锁定, 无法添加新回复