微信小程序 iPhone X 安全区域 适配

358 阅读1分钟

针对底部安全区域(底部小黑条会覆盖住内容)的适配

第一步:

在公共js文件app.js里面,调用wx.getSystemInfo接口获得手机型号res.model。接着,定义一个全局变量“isIphoneX”来存储手机型号这个值,存到缓存(wx.setStorageSync)里面。

第二步:假定test.wxml用到

在test.js页面内的onLoad()函数内拿出全局变量的isIphoneX,放到this.setData里面。

第三步:

在test.wxml需要适配的view里写上三元运算符的样式,例如:

<view class="footer" style="margin-bottom: {{isIphoneX ? '68rpx' : '0rpx'}} !important;">

好啦解决!