DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2019-01-29 16:14
  • 更新:2019-01-29 16:14
  • 阅读:1370

uni-app 为 iOS(iPhoneX)底部安全区适配

分类:uni-app

使用原生占位

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

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

不使用原生占位

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>  
3 关注 分享
DCloud_IOS_XTY 352489099@qq.com DCloud_UNI_Trust

要回复文章请先登录注册