🍏 UniApp iOS端input组件失焦抖动问题的趣味讲座

大家好，欢迎来到今天的UniApp技术讲座！今天我们要聊的是一个让很多开发者头疼的问题：iOS端input组件失焦时的“抖动”现象。你是不是也遇到过这种情况？输入框一失焦，页面就像中了“震屏符”一样，上下晃动，用户体验瞬间拉满（但不是好的那种）？

别担心，今天我们就来一起解决这个让人抓狂的小问题。😎

1. 问题重现：抖动从何而来？

首先，我们来了解一下为什么会出现这种抖动现象。在iOS设备上，当用户点击<input>或<textarea>时，系统会自动弹出虚拟键盘。为了给用户更好的输入体验，iOS会调整页面的滚动位置，确保输入框不会被键盘遮挡。然而，当用户点击其他地方导致输入框失焦时，iOS会尝试恢复页面的原始滚动位置，这就可能导致页面出现短暂的“抖动”。

代码示例：重现抖动

<template>
  <view class="container">
    <input type="text" placeholder="请输入内容" />
    <view class="content">
      <p>这是一些文本内容</p>
      <p>这是一些文本内容</p>
      <p>这是一些文本内容</p>
      <!-- ...更多文本内容... -->
    </view>
  </view>
</template>

<style>
.container {
  padding: 20px;
}
input {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
}
.content p {
  margin: 10px 0;
}
</style>

在这个简单的例子中，当你点击输入框并输入内容后，再点击页面其他地方，你会发现页面会有轻微的上下抖动。尤其是在长页面中，这种抖动会更加明显。

2. 解决方案：如何让页面不再“跳舞”？

2.1 禁用页面滚动

一种常见的解决方案是，在输入框获得焦点时，禁用页面的滚动，防止iOS自动调整页面位置。等用户完成输入并失焦后，再恢复页面的滚动功能。

实现思路：

• 使用touchmove事件阻止默认行为。
• 在输入框获得焦点时，添加事件监听器。
• 在输入框失焦时，移除事件监听器。

代码实现：

export default {
  data() {
    return {
      isFocused: false
    };
  },
  methods: {
    handleFocus() {
      this.isFocused = true;
      document.body.addEventListener('touchmove', this.preventDefault, { passive: false });
    },
    handleBlur() {
      this.isFocused = false;
      document.body.removeEventListener('touchmove', this.preventDefault, { passive: false });
    },
    preventDefault(event) {
      event.preventDefault();
    }
  }
};

注意事项：

• passive: false 是为了让event.preventDefault()生效。默认情况下，浏览器会将触摸事件视为“被动”事件，无法阻止默认行为。
• 这种方法虽然有效，但可能会让用户感觉页面变得不那么流畅，尤其是当用户习惯于滚动页面时。

2.2 固定页面高度

另一种更优雅的解决方案是，在输入框获得焦点时，固定页面的高度，防止iOS自动调整页面滚动位置。这样即使键盘弹出，页面也不会发生位移。

实现思路：

• 在输入框获得焦点时，记录当前页面的滚动位置，并设置页面的高度为100%，防止页面滚动。
• 在输入框失焦时，恢复页面的滚动功能，并重置页面的高度。

代码实现：

export default {
  data() {
    return {
      originalScrollY: 0,
      isFixed: false
    };
  },
  methods: {
    handleFocus() {
      this.originalScrollY = window.scrollY;
      this.isFixed = true;
      document.body.style.height = '100%';
      document.body.style.overflow = 'hidden';
    },
    handleBlur() {
      this.isFixed = false;
      document.body.style.height = '';
      document.body.style.overflow = '';
      window.scrollTo(0, this.originalScrollY);
    }
  }
};

注意事项：

• 这种方法可以有效避免抖动，同时保持页面的流畅性。
• 需要注意的是，如果你的页面有复杂的布局或动画效果，可能需要根据实际情况调整样式。

2.3 使用position: fixed

还有一种更为激进的解决方案是，直接将输入框及其父容器设置为position: fixed，使其脱离文档流，不受页面滚动的影响。这种方法适用于输入框位于页面顶部或底部的情况。

实现思路：

• 在输入框获得焦点时，将输入框的父容器设置为position: fixed，并固定在页面的某个位置。
• 在输入框失焦时，恢复父容器的默认样式。

代码实现：

.fixed-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

export default {
  data() {
    return {
      isFixed: false
    };
  },
  methods: {
    handleFocus() {
      this.isFixed = true;
    },
    handleBlur() {
      this.isFixed = false;
    }
  }
};

注意事项：

• 这种方法适合输入框位于页面顶部或底部的场景，但如果输入框位于页面中部，可能会导致用户无法看到完整的输入框。
• 需要根据实际需求灵活调整样式和布局。

3. 总结与扩展

通过以上几种方法，我们可以有效地解决iOS端input组件失焦时的抖动问题。每种方法都有其适用场景和优缺点，具体选择哪种方案取决于你的项目需求和用户体验。

• 禁用页面滚动：适合简单页面，能快速解决问题，但可能影响用户体验。
• 固定页面高度：较为优雅的解决方案，既能避免抖动，又能保持页面流畅。
• 使用position: fixed：适合输入框位于页面顶部或底部的场景，但需要谨慎处理布局。

扩展阅读

在查阅国外技术文档时，我们发现一些开发者提到了类似的问题，并提出了更深入的解决方案。例如，有人建议使用viewport单位来控制页面的高度，或者通过CSS的transform属性来微调输入框的位置。这些方法虽然复杂一些，但在某些特殊场景下可能会带来更好的效果。

结语

好了，今天的讲座就到这里啦！希望你能通过这些方法顺利解决iOS端input组件的抖动问题。如果你还有其他问题，欢迎随时交流讨论。😊

最后，记得点赞、收藏、关注三连哦！下次见～✨

---

温馨提示：本文中的代码示例仅供参考，实际项目中请根据具体情况调整。