uni-app 里似乎默认对 iPhone X 之类的全面屏手机做了适配,但在有些场景下,全屏显示的效果更好。
比如我调用了扫码的接口(uni.scanCode),底部的灰条就显得有些不合适。如下图所示:
请问有什么办法可以去掉底部的灰条,让页面全屏显示吗?
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 (作者)
@DCloud_IOS_XTY 感谢回复。
经过我的测试,还有2个问题:
可以用 hello-uni-app 项目测试,可以重现我说的问题。
Arsenal (作者)
回复 DCloud_IOS_XTY: 你发的链接里只讲了Webview页面该如何设置,在uni-app里不适用吧。而且扫码不是原生功能吗,我可以在扫码那里获取到当前的webview吗?
2019-01-10 10:10
可以设置放到page 的app-plus下 https://uniapp.dcloud.io/collocation/pages?id=app-plus
2019-01-10 10:31
回复 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
Arsenal (作者)
@DCloud_IOS_XTY
我按照你的方式,在 page.json 的 globalStyle 节点下这样设置:
"app-plus":{
"contentAjust":false
}
但还是没有效果。可能是我之前没有描述清楚,我是想让 uni-app 里的扫码页面的底部不要出现安全区,如上面我发的截图所示,底部那块灰色不太好看,能否在扫码页面里把灰色那块去掉?
扫码我是调用的 uni.scanCode ,调用后自动打开了一个新页面,这个新页面应该是我们没办法控制的,因为文档里没有相关的设置 https://uniapp.dcloud.io/api/system/barcode
"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"
}
},
}
这样就好了,但是有些页面没有安全区会很难看,所以还需要单个页面配置
麻袋
同问
2019-03-21 16:11
k***@126.com
同问,也就是动态操作安全区域
2019-05-11 09:26