微信小程序 iPhoneX底部安全区域（底部小黑条）适配(一分钟解决)
更新时间：2019年10月18日 09:17:45 作者：乐呵乐呵de啦
iPhone X 对于微信小程序的tabbar来说，会被底部小黑条覆盖，需要处理，大概思路是，得到手机型号、分别判断样式。这篇文章主要介绍了微信小程序 iPhoneX底部安全区域（底部小黑条）适配问题,需要的朋友可以参考下
iPhone X 对于微信小程序的tabbar来说，会被底部小黑条覆盖，需要处理，大概思路是，得到手机型号、分别判断样式，即可，如下：
安全区域指的是内容可见区域（图中蓝色部分）：
处理前后效果图：
步骤：
1.在app.js的onLaunch函数内调用wx.getSystemInfo，获得手机型号（res.model），并存储为全局变量：
onLaunch: function() {
let _self = this;
wx.getSystemInfo({
success: res => {
let modelmes = res.model;
if (modelmes.search('iPhone X') != -1) {
_self.globalData.isIphoneX = true
}
wx.setStorageSync('modelmes', modelmes)
}
})
}
2.在所需页面的js文件的onLoad函数内从全局变量里面拿出来第一步存储的手机型号值，这里设置为isIphoneX：
onLoad: function(options)
let modelmes = wx.getStorageSync('modelmes');
let isIphoneX = app.globalData.isIphoneX;
this.setData({
isIphoneX: isIphoneX
})
}
3.在所需页面的wxml里面根据手机型号是否为iPhone X 来运用三元运算符判断底部的位置就可以啦：
<view class="footer" style="margin-bottom: {{isIphoneX ? '68rpx' : '0rpx'}};"></view>
已解决。
这是最简单的一种方法，有其他方法等待小伙伴们探索实践，比如可以用iOS新增的 “viewport-fit” 特性或者是 “env() 和 constant()” 特性。
总结
以上所述是小编给大家介绍的微信小程序 iPhoneX底部安全区域（底部小黑条）适配,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了VScode敲代码时自动导入包的解决方案,文中通过图文介绍的非常详细,对大家学习或者使用vscode具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了大规格文件的上传优化，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了低版本VS项目在VS2019无法正常编译的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要介绍了openlayers 模仿高德箭头导航路线图的示例代码，主要包括原始数据、起点/终点寻找、起点和终点样式函数，结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-05-05
进制转换算法原理（二进制 八进制 十进制 十六进制），以前上学那会确实学过，长时间不用都忘了。2010-05-05
这篇文章主要为大家介绍了Hash算法示例应用场景解延伸探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
本文主要介绍了Git的基础知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了Chrome 调试技巧(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
接下来小编就为大家介绍一下在Zend Stdio 8.0版本中的快捷键汇总。需要的朋友可以过来参考下，希望对大家有所帮助2013-10-10
本文主要介绍了Git撤销操作、删除文件和恢复文件的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论