解决uni-app开发中iphoneX下背景不能全屏铺满的问题


使用原生占位(仅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); 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM