iOS键盘遮挡popup层？别慌，来看看这3招轻松搞定！

2023-07-15 23:20:31

解决 iOS 中使用 vant-popup 组件时软键盘遮挡弹出层问题

前言

作为前端开发者，我们在移动端开发中经常会遇到各种问题，其中之一是如何在页面弹出层时，防止软键盘遮挡住弹出层的内容。对于使用 vant-popup 组件的开发人员来说，这个问题尤其突出。本文将深入探讨三种解决该问题的有效方法：窗口滚动、固定定位和绝对定位。

1. 使用窗口滚动

原理： 当输入框获取焦点时，将窗口滚动到弹出层的位置，防止软键盘遮挡。

步骤：

在 popup 组件中添加 onfocus 事件监听器。
在 onfocus 事件处理函数中，获取 popup 组件的高度。
将窗口的滚动高度设置为 popup 组件的高度。

代码示例：

<template>
  <van-popup v-model="show" @focus="handleFocus">
    <input type="text" placeholder="请输入内容">
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    handleFocus() {
      const popupHeight = this.$refs.popup.offsetHeight
      window.scrollTo(0, popupHeight)
    }
  }
}
</script>

2. 使用固定定位

原理： 将 popup 组件固定在页面顶部，当输入框获取焦点时，软键盘弹起也不会遮挡 popup 组件。

步骤：

将 popup 组件的定位方式设置为 fixed。
将 popup 组件的 top 属性设置为 0。

代码示例：

<template>
  <van-popup v-model="show" style="position: fixed; top: 0;">
    <input type="text" placeholder="请输入内容">
  </van-popup>
</template>

3. 使用绝对定位

原理： 将 popup 组件定位到页面的底部，当输入框获取焦点时，软键盘弹起也不会遮挡 popup 组件。

步骤：

将 popup 组件的定位方式设置为 absolute。
将 popup 组件的 top 属性设置为 100%。
将 popup 组件的 margin-top 属性设置为 -100%。

代码示例：

<template>
  <van-popup v-model="show" style="position: absolute; top: 100%; margin-top: -100%;">
    <input type="text" placeholder="请输入内容">
  </van-popup>
</template>