微信小程式自定義底部按鈕适配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底部小黑塊高度