脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vant自定义组件适配iphone底部安全区

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

 更新时间：2024年03月14日 10:14:42   作者：超喜欢你呦  
这篇文章主要介绍了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属性并加载具体样式

大功告成~

总结

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

您可能感兴趣的文章:

相关文章

  • vue集成kindeditor富文本的实现示例代码

    vue集成kindeditor富文本的实现示例代码

    这篇文章主要介绍了vue集成kindeditor富文本的实现示例代码，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • Vue.js 2.x之组件的定义和注册图文详解

    Vue.js 2.x之组件的定义和注册图文详解

    组件Component是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码，这篇文章主要介绍了Vue.js 2.x：组件的定义和注册,需要的朋友可以参考下
    2018-06-06
  • vue axios登录请求拦截器

    vue axios登录请求拦截器

    这篇文章主要介绍了vue axios登录请求拦截器，判断是否登录超时，或对请求结果做一个统一处理的教程详解,需要的朋友可以参考下
    2018-04-04
  • Vue如何引入远程JS文件

    Vue如何引入远程JS文件

    本篇文章主要介绍了Vue引入远程JS文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • vue-resource 拦截器（interceptor）的使用详解

    vue-resource 拦截器（interceptor）的使用详解

    本篇文章主要介绍了vue-resource 拦截器（interceptor）的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • VUE的数据代理与事件详解

    VUE的数据代理与事件详解

    这篇文章主要为大家介绍了VUE的数据代理与事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vue的自定义事件之组件通信工具详解

    Vue的自定义事件之组件通信工具详解

    这篇文章主要介绍了Vue的自定义事件之组件通信工具详解,Vue的自定义事件(Custom Events)是一种强大的工具,用于实现组件之间的通信和数据传递,本文将深入探讨什么是Vue的自定义事件,以及如何自定义和使用它们,需要的朋友可以参考下
    2023-10-10
  • Vue dep.notify() 含义及作用详解

    Vue dep.notify() 含义及作用详解

    dep.notify() 是Vue2响应式系统中触发依赖更新的核心方法,也是理解Vue2 视图“自动更新”的关键,本文给大家介绍Vue dep.notify() 含义及作用,感兴趣的朋友跟随小编一起看看吧
    2025-12-12
  • vue两个输入框联动校验方式(最大值-最小值)

    vue两个输入框联动校验方式(最大值-最小值)

    这篇文章主要介绍了vue两个输入框联动校验方式(最大值-最小值)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • VsCode新建VueJs项目的详细步骤

    VsCode新建VueJs项目的详细步骤

    本篇文章主要介绍了VsCode新建VueJs项目的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论