uni

2023-08-11 05:54| 来源: 网络整理| 查看: 265

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 上列表底部会有内边距，在其他设备上没有内边距：

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

nvue 页面不支持 css 常量，可以使用 uni.getSystemInfo 获取 safeAreaInsets 动态设置到 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);

【本文地址】

uni

uni

今日新闻

推荐新闻