Vant如何自定义组件适配iphone底部安全区

场景

• IM

问题

聊天界面输入框在iphone下被底部指示条遮盖

如下图：

解决方案

参考 Vant 内置组件适配方案

Vant文档：https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage

Vant 内置组件中添加了 safe-area-inset-bottom 属性，即是在css中添加对应样式

iOS11 的新增特性，Webkit 的 CSS 函数，用于设定安全区域与边界的距离

它有四个预定义的变量：

• safe-area-inset-left：安全区域距离左边边界距离
• safe-area-inset-right：安全区域距离右边边界距离
• safe-area-inset-top：安全区域距离顶部边界距离
• safe-area-inset-bottom：安全区域距离底部边界距离

第一步：在 index.html 的 head 标签中加入以下 meta：

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

第二步：在项目 index.css 中添加下列样式：

/**
 * 适配 iphone 底部安全区（指示条，配合index.html <meta name="viewport" ... />使用
 */
@supports (bottom: env(safe-area-inset-bottom)){
    #app {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

@supports 是CSS3新引入的规则之一

主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式

大功告成~

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。