DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2019-01-29 16:14
  • 更新:5 天前
  • 阅读:7020

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

分类:uni-app

使用原生占位(仅App端支持)

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

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

不使用原生占位(非App端可以不配置mainfest)

mainfest.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>  

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

使用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);    
8 关注 分享
DCloud_IOS_XTY asdadad啊的 Trust hnxylc8818@163.com 306816224@qq.com 986888783@qq.com wenju 522908078@qq.com

要回复文章请先登录注册

DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 136864718@qq.com:
iOS13的问题处理中
5 天前
136864718@qq.com

136864718@qq.com

ios 13.1的iPhone X无法真机调试。
打开文件服务失败,请尝试拔掉数据线后重新连接手机,或重启手机再试
安装最新alpha版本的也不行
只有我一个人这样吗~~
5 天前
8112857@qq.com

8112857@qq.com

回复 DCloud_UNI_GSQ:
测试了,现在版本直接就可以用,万分感谢哦
2019-08-21 16:46
8112857@qq.com

8112857@qq.com

回复 DCloud_UNI_GSQ:
我能不能,直接的获取到这个区域大小以后,直接对我的view,设置padding,还是说我必须要在mainfest里边,设置safearea信息,才能用这个
2019-08-21 16:30
8112857@qq.com

8112857@qq.com

回复 DCloud_UNI_GSQ:
现在版本的hbuilderx已经可以用了吗?
2019-08-21 16:29
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 8112857@qq.com:
http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getSafeAreaInsets
2019-08-21 16:25
8112857@qq.com

8112857@qq.com

回复 DCloud_UNI_GSQ:
大概要什么时候可以OK哇?目前有什么办法,只要可以拿到安全区的高度即可?nvue下的
2019-08-20 16:21
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 8112857@qq.com:
后期将补充API,在js获取安全区信息
2019-08-20 11:50
8112857@qq.com

8112857@qq.com

回复 DCloud_UNI_GSQ:
nvue模式下,怎么设置安全区域?最主要是不同页面的安全区域的颜色都还不一样,这个应该怎么实现啊
2019-08-20 10:38
8112857@qq.com

8112857@qq.com

nvue模式下,怎么设置安全区域?最主要是不同页面的安全区域的颜色都还不一样,这个怎么实现
2019-08-19 20:13
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 986888783@qq.com:
有的,点开参考链接
2019-08-14 19:58
986888783@qq.com

986888783@qq.com

发个图 标注一下 不然就跟说天书一样
2019-08-14 19:41
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 522908078@qq.com:
单独发帖说明,附上详细的问题截图,设备型号和系统等信息
2019-08-14 19:21
522908078@qq.com

522908078@qq.com

回复 522908078@qq.com:
直接将bottom:0,但是底部的tabbar还是会被顶起
2019-08-14 15:14
522908078@qq.com

522908078@qq.com

回复 手写的从前:
没有 按照第二种方法设置"不使用原生占位(非App端可以不配置mainfest)",没生效
2019-08-14 10:33
手写的从前

手写的从前

回复 522908078@qq.com:
请问解决了吗
2019-08-14 09:41
522908078@qq.com

522908078@qq.com

按照 使用 css 常量 constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 来适配 没有效果啊
2019-08-07 17:25
522908078@qq.com

522908078@qq.com

在登录页面又需要全屏,这个咋弄啊?
2019-08-07 16:57
2687308317@qq.com

2687308317@qq.com

回复 草泥马二号:
我的也是,如果是新打开的页面,就是无效,如果是tabBar页面跳转的就可以
2019-07-15 09:26
972037179@qq.com

972037179@qq.com

在苹果端这个方法是可以的
2019-07-14 15:47
324800674@qq.com

324800674@qq.com

设置无效啊
2019-07-12 15:40
草泥马二号

草泥马二号

通过mui.openWindow 新的子页面,
viewport-fit=cover
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
就是失效了
2019-07-05 02:30
草泥马二号

草泥马二号

openView 子页面无效,然后刷新一下这个就又好了
2019-07-05 02:24
ming.he@qq.com

ming.he@qq.com

微信网页下面不支持,怎么处理?
2019-06-09 16:33