tuzi
tuzi
  • 发布:2020-08-21 11:49
  • 更新:2022-04-08 18:05
  • 阅读:9399

uniapp在APP中设置窗口背景透明无效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.8.8

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: nova4

页面类型: vue

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

"style": {
"navigationStyle": "custom", // 取消本页面的导航栏
"app-plus": {
"animationType": "fade-in", // 设置fade-in淡入动画,为最合理的动画类型
"background": "transparent", // 背景透明
"backgroundColor": "rgba(0,0,0,0)", // 背景透明
"webviewBGTransparent":true,
"mask":"none",
"opacity":0.9,
"popGesture": "none" // 关闭IOS屏幕左边滑动关闭当前页面的功能
}
}

操作步骤:

打开对应的页面后,背景依然为白色,除非设置opacity,但是那并不是我想要的效果

预期结果:

打开对应的页面后,背景依然为白色,除非设置opacity,但是那并不是我想要的效果

实际结果:

打开对应的页面后,背景依然为白色,除非设置opacity,但是那并不是我想要的效果

bug描述:

uniapp在APP中设置窗口背景透明无效

2020-08-21 11:49 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

按照文档使用,发现无法实现透明背景
在页面中设置style 样式 style 头部 不能引入 scoped
然后 在样式中加入 page {background: transparent;} 即可实现 uniapp app 测试有效。知识来源于分享

chenli

chenli

// pages.json配置  
"style": {    
  "backgroundColor": "transparent", // 防止ios不透明   
}
// 样式  
page {background: transparent;}

两个要一起使用才可以。

  • t***@qq.com

    安卓我只设置了页面的page透明没用,只设置pages.json透明也没用,两个一起设置就有用了

    2021-07-13 11:08

hws007

hws007 - 我就是我!

< style lang="scss" scoped >记得里面要去掉scoped,搞半天,才发现
APP搞定
在看H5,怎么透明

chenli

chenli

"style": {  
  "backgroundColor": "transparent", // 添加这个再看看  
}
  • tuzi (作者)

    试过了,没用

    2020-08-21 13:47

  • chenli

    回复 tuzi: 样式方式:page {background: transparent;}

    2020-08-21 13:54

  • tuzi (作者)

    回复 chenli: 谢谢,这下可以了

    2020-08-21 14:14

  • 梦里追逐

    回复 tuzi: 大佬 你是具体怎么设置的 我按照你的设置还是不行 不透明呢

    2021-01-12 19:52

1***@qq.com

1***@qq.com

设置了 page {background: transparent;} 还是没有透明效果

  • 梦里追逐

    我也是的

    2021-01-12 19:55

  • 景风

    请问解决了吗,我加了也没透明

    2021-06-30 18:30

一抱一个胖猪猪

一抱一个胖猪猪 - 喜猪妹一只,爱超大只!管你好不好看,吨位最重要!

请问透明成功了吗

陌语

陌语 - uni-app

为什要这么做把页面设置透明呢? 你直接在页面中的style里面添加这个样式就搞定了。 page{background-color: rgba(0, 0, 0, 0)} 这样整个页面就透明了,根本不用去pages.json中设置哦。

  • 1***@qq.com

    如果你需要一个可以盖住原生导航栏的弹出框呐

    2022-07-15 18:02

要回复问题请先登录注册