admin 管理员组

文章数量: 1184232

方案一(最快速)

解决办法：利用 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官网

本文标签： 区域 苹果 手机 uni App

版权声明：本文标题：uni-app 苹果手机底部安全区域的适配问题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1766536636a3467769.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。