uni-app 苹果手机底部安全区域的适配问题

方案一(最快速)

解决办法：利用 IOS 新增的 env() 和 constant() 特性来解决，不需要自己动态计算高度，只需将如下 CSS 代码添加到样式中即可。无法解决如果底部区域是输入框，苹果手机的输入法会把输入框遮挡的问题

<!-- 底部栏 -->
<view class="end-box"></view>

/* 底部栏 */
.end-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

方案二(动态计算)

解决办法：利用 getSystemInfo() 获取系统信息接口方法。可解决如果底部区域是输入框，苹果手机的输入法会把输入框遮挡的问题

<!-- 底部栏 -->
<view class="end-box" :style="'padding-bottom: ' + bottomPadding + 'px'"></view>

/* 底部栏 */
.end-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

bottomPadding: 0, // 底部安全区域距离

/* 获取底部安全区域 */
async getSafeArea() {
  const res = await uni.getSystemInfo({});
  this.bottomPadding = res.screenHeight - res.safeArea.bottom;
},

底部区域是输入框时被遮挡的问题

使用获取的 bottomPadding 字段来设置光标与键盘的距离

<input
  v-model="commentVal"
  :cursor-spacing="bottomPadding || 20"
  placeholder="评论内容"
  maxlength="300"
/>

cursor-spacing：指定光标与键盘的距离(单位 px)。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

input 详情：input | uni-app官网