小程序界面部分空白适配iPhone X

有时候我们的页面发现在iPhone X运行起来的时候,下面有一部分是空白的,那我们

怎么解决这个问题了,首先我们就应该在打开程序的时候获取手机机型,然后用过全局变量,告诉界面本次使用的手机是不是iPhoneX

const api = require('./utils/api')
//app.js
App({
  onLaunch: function (ops) {

    // 展示本地存储能力

    if (ops.scene == 1044) {
      console.log(ops.shareTicket)
    }

    var _this = this
    wx.getSystemInfo({
      success: function (res) {
        // console.log(res.model)
        // console.log(res.pixelRatio)
        // console.log(res.windowWidth)
        // console.log(res.windowHeight)
        // console.log(res.language)
        // console.log(res.version)
        // console.log(res.platform)
        if (res.model == 'iPhone X') {
          _this.globalData.isIpx= true;
          // console.log(_this.globalData.isIpx)
        }
      }
    })
  },
  globalData: {
    isIpx: false
  }

})

然后我们需要给iPhone X和正常的手机各一套css样式

/* app.wxss */

.fix-iphonex-button {
  background: linear-gradient(180deg, rgba(255, 189, 91, 1), rgba(237, 130, 79, 1));
  height: 1448rpx;
  width: 100%;
}

.fix-iphonex-button::after {
  background: linear-gradient(180deg, rgba(255, 189, 91, 1), rgba(237, 130, 79, 1));
  height: 1206rpx;
  width: 100%;
}

界面View在给class的时候根据isIpx来判断给哪个样式

  
  .....内容