Arsenal
Arsenal
  • 发布:2018-12-28 18:48
  • 更新:2020-09-27 10:24
  • 阅读:11662

uni-app 里如何让页面在 iPhone X 等全面屏手机上全屏显示(去掉安全区)

分类:uni-app

uni-app 里似乎默认对 iPhone X 之类的全面屏手机做了适配,但在有些场景下,全屏显示的效果更好。

比如我调用了扫码的接口(uni.scanCode),底部的灰条就显得有些不合适。如下图所示:

请问有什么办法可以去掉底部的灰条,让页面全屏显示吗?

2018-12-28 18:48 负责人:无 分享
已邀请:
今天回复我了吗

今天回复我了吗 - uniapp 粉丝条

遇到相同问题,怎么在单个页面设置取消安全区域,别的地方不取消?

DCloud_IOS_XTY

DCloud_IOS_XTY

mainfest.json plus节点下配下safearea
    "safearea": {  
        "background":"#CCCCCC",    // 安全区域外的背景颜色,默认值为"#FFFFFF"  
        "bottom":{    // 底部安全区域配置  
            "offset":"none|auto"       // 底部安全区域偏移,"none"表示不空出安全区域,"auto"自动计算空出安全区域,默认值为"none"  
        },  
        "left": {    // 左侧安全区域配置(横屏显示时有效)  
            "offset":"none|auto"  
        },  
        "right: {    // 右侧安全区域配置(横屏显示时有效)  
            "offset":"none|auto"  
        }  
    }  
    iPhoneX的安全区域配置。
Arsenal

Arsenal (作者)

@DCloud_IOS_XTY 感谢回复。

经过我的测试,还有2个问题:

  1. "safearea" 应该放在 mainfest.json 文件的 "app-plus" 节点下,放在 "plus" 节点下不起效。
  2. 设置后,普通页面确实已经生效,但在 扫一扫 里,底部依然存在安全区,我就不截图了,和上面的效果一样。

可以用 hello-uni-app 项目测试,可以重现我说的问题。

  • DCloud_IOS_XTY

    http://ask.dcloud.net.cn/article/35386

    2019-01-09 19:01

  • Arsenal (作者)

    回复 DCloud_IOS_XTY: 你发的链接里只讲了Webview页面该如何设置,在uni-app里不适用吧。而且扫码不是原生功能吗,我可以在扫码那里获取到当前的webview吗?

    2019-01-10 10:10

  • DCloud_IOS_XTY

    可以设置放到page 的app-plus下 https://uniapp.dcloud.io/collocation/pages?id=app-plus

    2019-01-10 10:31

  • kobeair_008@163.com

    回复 DCloud_IOS_XTY:

    "pages": [{


                "path": "applaunch",  

    "style": {

    "navigationStyle": "custom",

    "app-plus": {

    "bottom": "0",

    "contentAdjust": "false",

    "bounce": "none",

    "safearea": {

    "bottom": "none"

    }

    }

    }

    }]

    单独页面设置 不起作用

    2020-05-28 12:15

270315475@qq.com

270315475@qq.com - 接单-APP、小程序高性能接单,QQ:270315475、wx:jin_biao

怎么在单个页面设置取消安全区域,别的地方不取消?

Arsenal

Arsenal (作者)

@DCloud_IOS_XTY

我按照你的方式,在 page.json 的 globalStyle 节点下这样设置:

        "app-plus":{  
            "contentAjust":false  
        }

但还是没有效果。可能是我之前没有描述清楚,我是想让 uni-app 里的扫码页面的底部不要出现安全区,如上面我发的截图所示,底部那块灰色不太好看,能否在扫码页面里把灰色那块去掉?

扫码我是调用的 uni.scanCode ,调用后自动打开了一个新页面,这个新页面应该是我们没办法控制的,因为文档里没有相关的设置 https://uniapp.dcloud.io/api/system/barcode

sharper

sharper - 坐看风云涌起

同问

mingzaily@163.com

mingzaily@163.com - mingzaily

请问解决了吗

573648785@qq.com

573648785@qq.com

"app-plus" : {
"usingComponents" : true,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
"safearea": {
// "background":"#CCCCCC", // 安全区域外的背景颜色,默认值为"#FFFFFF"
"bottom":{ // 底部安全区域配置
"offset":"none" // 底部安全区域偏移,"none"表示不空出安全区域,"auto"自动计算空出安全区域,默认值为"none"
},
"left": { // 左侧安全区域配置(横屏显示时有效)
"offset":"none"
},
"right": { // 右侧安全区域配置(横屏显示时有效)
"offset":"none"
}
},
}
这样就好了,但是有些页面没有安全区会很难看,所以还需要单个页面配置

小安迪

小安迪 - 移动开发者

同问,想要单个页面取消底部安全距离,目前唯一的办法就是不使用page.json中的tabBar配置,完全用自定义的tabBar,但是这样改动会很大

  • Arsenal (作者)

    对的,只能改造首页的tabBar

    2020-03-19 10:40

1437258345@qq.com

1437258345@qq.com - 好好学习uniapp

这个安全区域对小程序端适用吗?

  • Arsenal (作者)

    小程序和这个不一样

    2020-03-19 10:39

  • 木白蔷薇

    回复 Arsenal: 请问大佬,小程序的要怎么兼容ios下面的横条

    2020-04-30 11:43

  • Arsenal (作者)

    回复 木白蔷薇: 小程序没有我说的这个问题,这个问题只会在APP端存在

    2020-05-09 10:38

天上星星

天上星星

这问题有人解决了吗?

  • Arsenal (作者)

    没有解决

    2020-09-10 11:46

白色风车

白色风车 - 承接前端外包

承接前端H5、小程序、APP、PC端网站等外包,主要技术栈为vue、uni-app,有意请加微信:13070273424

chujiazhen

chujiazhen

请问这个问题解决了吗

  • Arsenal (作者)

    没有解决....

    2020-09-27 10:26

要回复问题请先登录注册