DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2019-01-29 16:14
  • 更新:2021-02-25 14:31
  • 阅读:49683

uni-app 全面屏、刘海屏适配(iphoneX适配)及安全区设置

分类:uni-app

iOS方案一:使用原生占位(仅App端支持)

manifest.json 文件 app-plus 节点下配下 safearea

"safearea": {  
    "background": "#CCCCCC",  
    "bottom": {  
        "offset": "auto"  
    }  
}

iOS方案二:不使用原生占位(非App端可以不配置manifest)

manifest.json 文件 app-plus 节点下配下 safearea

"safearea": {  
    "bottom": {  
        "offset": "none"  
    }  
}

然后在需要适配的页面内使用 css 常量 constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 来适配,参考:为iPhoneX设计网站。微信小程序模拟器不支持,以真机为准。

比如为列表底部添加内边距避开安全区,在 iPhoneX 上列表底部会有内边距,在其他设备上没有内边距:

<style>  
.list {  
  padding-bottom: 0;  
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: env(safe-area-inset-bottom);  
}  
</style>

注意:使用了pages.json里的原生tabbar,不管manifest里安全区设置如何,在tabbar下方都会留出空隙。

判断是否为刘海屏的方法

使用5+ API (plus.navigator.hasNotchInScreen)可查询当前设备是否为刘海屏。
详情参考:https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.hasNotchInScreen

安卓底部虚拟按键背景色修改方式

使用Native.js修改:

var Color = plus.android.importClass("android.graphics.Color");    
    plus.android.importClass("android.view.Window");    
    var mainActivity = plus.android.runtimeMainActivity();    
    var window_android = mainActivity.getWindow();    
    window_android.setNavigationBarColor(Color.GREEN);  
15 关注 分享
DCloud_IOS_XTY 今天回复我了吗 Trust hnxylc8818@163.com 306816224@qq.com 986888783@qq.com wenju 522908078@qq.com _1900 aliang888 有酒不饮 ttrr 1228774991@qq.com conanhawke@qq.com LunaYJ

要回复文章请先登录注册

270315475@qq.com

270315475@qq.com

这个安全区可以设置个透明色吗 别带颜色就好了,又不能单独设置页面,能搞个透明色也能行呀
2021-02-25 14:31
923884607@qq.com

923884607@qq.com

回复 admin@ebao.vip :
我想某个单独的页面不需要底部安全距离,其他都要,我该怎么办呢?有解决方案了吗?我已经在manifest里面设置了全局的了
2021-02-21 20:17
wzsgjlzhy

wzsgjlzhy

如果不设置这个属性,默认值是auto吗?默认应该是有原生占位的吧
2021-01-16 16:24
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 admin@ebao.vip :
不能,此为全局配置
2020-12-16 10:42
admin@ebao.vip

admin@ebao.vip

在manifest.json文件中配置了也生效了,但是会影响我写的其他界面,其他界面需要底部的显示,能不能只针对某一个页面单独取设置这个属性呢
"safearea": {
"bottom": {
"offset": "none"
}
}
2020-12-16 00:03
想得美

想得美

回复 救救孩子吧 :
uni.getsystemInfoSync().safeAreaInsets.bottom
我用这个来获取苹果虚拟home键高度解决的
2020-11-20 17:17
救救孩子吧

救救孩子吧

回复 想得美 :
我现在也是nvue 用的自己写的tabbar没用原生 小程序小程序出现同样的问题无法解决 有什么其他解决方法吗?
2020-11-20 15:13
想得美

想得美

nvue不支持constant(safe-area-inset-bottom); env(safe-area-inset-bottom); 怎么办
2020-11-05 14:01
飞翔的腿毛

飞翔的腿毛

回复 529940822@qq.com :
兄弟 有解决办法吗?
2020-09-28 11:25
小李子啊

小李子啊

作者你好,我也是为了适配页面底部的一个盒子的,一开始是由效果的,弹出键盘再收回,这个适配就失效了是什么原因呢
2020-09-26 16:47