IPhone X 以上 ”下巴“ 的适配

一、需求

ihone手机”下巴“处 按钮处理，如果由下巴，那么我们把按钮的位置上移一些。

 二、解决

// calcToBottomHeight 计算后bottom所需要的值
<div class="c-button" :style="{'bottom': calcToBottomHeight + 'px'}">
      <div class="c-button-item c-align-center">
        <span class="c-font-16">确定</span>
      </div>
    </div>

// calcToBottomHeight 计算后所需要的高度
<div class="c-button" :style="{'bottom': calcToBottomHeight + 'px'}">
      <div class="c-button-item c-align-center" @click="deSendInvoice">
        <span class="c-font-16">确定</span>
      </div>
    </div>computed: {
    calcToBottomHeight () {
      let flat = 0
      const needSafeAreaMap = [
        'iPhone X',
        'iPhone 11',
        'iPhone 12',
        'iPhone 13'
      ]
      wx.getSystemInfo({
        success: res => {
          console.log('61', res)
          this.statusBatHeight = res.statusBarHeight
          for (let i = 0; i < needSafeAreaMap.length; i++) {
            if (res.model.includes(needSafeAreaMap[i])) {
              flat = 1
            }
          }
        }
      })
      return flat ? this.statusBatHeight : 0
    }
  },

statusBarHeight

number

状态栏的高度，单位px

model

string

设备型号

三、欢迎交流指正