一、内容详讲
在微信小程序设计按钮固定底部时，如果在编辑器使用的模拟器是iPhone X以下的机型时没有什么问题。
但是如果iPhone X以上的机型，会发现底部有黑条，会挡住按钮，而且操作不便。
所以我们要为底部按钮设置一个自适应高度，当机型为iPhone X以下或者安卓系统时，底边距离消失。如果是iPhone X及以上则设置距离。
二、代码
在app.js中先获取当前设备信息，判断是否需要留空。
onLaunch: function () {
//获取当前设备信息
wx.getSystemInfo({
success: res => {
this.globalData.bottomLift = res.screenHeight - res.safeArea.bottom;
},
fail(err) {
console.log(err);
}
})
},
globalData:{
bottomLift: 0
}
在需要用到的页面js文件中调用
const app = getApp()
data:{
bottomLift: app.globalData.bottomLift
}
在页面的按钮view中加上改style
<view style="padding-bottom:{{ bottomLift }}px"></view>//加上该style
效果图如下
文章来源：https://www.toymoban.com/news/detail-618391.html
关于如何将按钮固定底部可以点击查看文章文章来源地址https://www.toymoban.com/news/detail-618391.html
到了这里，关于微信小程序 ---- iPhone X 以上机型留出底部安全距离的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
