微信小程序自定义底部按钮适配Iphone底部的小黑块

1、app.js

//app.js
App({
  onLaunch: function (options) {
    // 获取系统信息，底部导航栏做适配
    wx.getSystemInfo({
      success: (res) => {
        // console.log(res)
        let modelmes = res.model; //手机品牌
        console.log('手机品牌', modelmes)
        if (modelmes.indexOf('iPhone X') != -1) {　　//XS,XR,XS MAX均可以适配,因为indexOf()会将包含'iPhone X'的字段都查出来
          this.globalData.isIpx = true
        }
      },
    })
  },

  globalData: {
    isIpx: false,   //适配IPhoneX
  }

})
           

2、页面中使用

js在公共变量data里面声明一个变量

isIpx: getApp().globalData.isIpx ? true : false, //底部按钮适配Iphone X
           

在wxml中判断

height:{{isIpx?124+68:124}}rpx
           

68rpx为iPhone底部小黑块高度