微信小程序iPhoneX底部安全区(底部黑条)适配(一分钟解决方案)

对于微信小程序的tabbar，iPhone X会被底部的小黑条覆盖，需要处理。总的思路是得到手机的型号，分别判断款式，如下：

安全区域是指内容的可见区域(图中蓝色部分):

加工前后效果图：

步骤：

1.在app.js的onLaunch函数中调用wx.getSystemInfo，获取手机型号(res.model)并存储为全局变量：

onLaunch:函数(){ let _ self=thiswx . getsysteminfo({ success : RES={ let model mes=RES . model；if (modelmes.search('iPhone X ')！=-1){ _ self . global data . isiphonex=true } wx . setstorageync(' model mes '，modelmes)}}} 2。从所需页面js文件的onLoad函数中的全局变量中取出第一步存储的手机型号值，这里设置为isi phonex:

onLoad:函数(选项)让model mes=wx . getstoragesync(' model mes ')；让isIphoneX=app . global data . isIphoneX；这个。setdata({ isi phone x : isi phone x })} 3。在所需页面的wxml中，可以使用三元运算符根据手机型号是否为iPhone X来判断底部的位置：

view class=' footer ' style=' margin-bottom : { { isIphoneX '？68rpx ' : ' 0rpx ' } }'/view已解决。

这是最简单的方法，还有其他方法等待朋友们去探索和实践，比如使用iOS新的“viewport-fit”功能或者“env()和constant()”功能。

见官方文件：https://developer . apple.com/design/human-interface-guidelines/IOs/visual-design/adaption-and-layout/

摘要

以上是边肖推出的微信小程序iPhoneX的底部安全区(底部小黑条)的适配。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！