阅读 279

微信小程序兼容iphone刘海屏(计算底部padding)

描述:设置了padding值,但是在刘海屏手机上padding值不够,so找到了以下解决方案:

<view class="coverbox" style="padding-bottom:{{ phoneBtm }}rpx!important;"></view>



phoneBtm: 0, // 刘海屏底部距离

// 判断设备是否为刘海屏
checkIsIPhoneX() {
  wx.getSystemInfo({
    success: (res) => {
      var safeBottom = res.screenHeight - res.safeArea.bottom
      // this.kBottomSafeHeight = safeBottom
      //根据安全高度判断
      if (safeBottom === 34) {
        wx.nextTick(() => {
          this.setData({
            phoneBtm: (110 + 34)
          });
        });
      } else {
        wx.nextTick(() => {
          this.setData({
            phoneBtm: 110
          });
        });
      }
    }
  })
}
复制代码
文章分类
前端