微信小程序 ---- iPhone X 以上机型留出底部安全距离_微信小程序苹果安全距离

一、内容详讲

在微信小程序设计按钮固定底部时，如果在编辑器使用的模拟器是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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在需要用到的页面js文件中调用

const app = getApp()
data:{
	bottomLift: app.globalData.bottomLift
}
1
2
3
4

在页面的按钮view中加上改style

<view style="padding-bottom:{{ bottomLift }}px"></view>//加上该style
1

效果图如下

关于如何将按钮固定底部可以点击查看文章