手机端键盘弹出导致页面抖动

解决uni-app中手机端键盘弹出导致页面抖动的问题

问题背景

在开发uni-app跨平台应用时，我们经常会遇到这样的问题：当用户在弹窗中输入内容（例如备注信息）时，手机键盘弹出会导致页面布局混乱、出现抖动现象，严重影响用户体验。

问题原因分析

经过分析，导致手机端键盘弹出时页面抖动的主要原因有以下几点：

1.输入框自动调整位置：默认情况下，输入框在获得焦点时会自动调整位置以避免被键盘遮挡，这会导致整个页面布局发生变化。

2.弹窗高度未限制：当键盘弹出时，弹窗内容如果没有设置最大高度，可能会超出屏幕范围，导致页面滚动和抖动。

3.缺少安全区域适配：在有底部安全区域的设备上（如iPhone X及以上机型），弹窗可能会与安全区域重叠，导致布局异常。

4.键盘状态不稳定：频繁的键盘弹出和收起会导致页面布局反复调整，引起抖动。

解决方案

针对以上问题，我们可以通过以下几个步骤来解决：

优化弹窗配置，为uni-popup组件添加安全区域适配，确保在不同设备上都能正确显示：

javascript 复制代码

<uni-popup
  ref="popup"
  type="bottom"
  :mask-click="true"
  background-color="#fff"
  :safe-area-inset-bottom="true"  <!-- 添加安全区域适配 -->
>

改进输入框配置，为uni-easyinput组件添加关键属性，禁止自动调整位置并保持键盘状态：

javascript 复制代码

<uni-easyinput
  type="textarea"
  v-model="formData.remark"
  placeholder="请输入备注"
  :adjust-position="false"  <!-- 禁止自动调整位置 -->
  :hold-keyboard="true"    <!-- 保持键盘状态 -->
/>

添加弹窗内容样式，创建.popup-content类并设置合理的样式，确保弹窗内容在键盘弹出时能够正确显示：

javascript 复制代码

/* 弹窗内容样式 */
.popup-content {
  padding: 20px;
  box-sizing: border-box;
  max-height: 80vh;  <!-- 限制最大高度 -->
  overflow-y: auto;  <!-- 允许内容滚动 -->
  -webkit-overflow-scrolling: touch;  <!-- 流畅的触摸滚动 -->
}

/* 适配小屏幕 */
@media (max-height: 500px) {
  .popup-content {
    max-height: 70vh;
  }
}

技术原理

禁止输入框自动调整位置：通过设置adjust-position="false"，阻止输入框在获得焦点时自动上移，避免页面布局混乱。

保持键盘状态：通过设置hold-keyboard="true"，确保键盘保持打开状态，避免频繁的键盘弹出和收起导致的页面抖动。

限制弹窗高度：通过设置max-height，确保弹窗内容不会超出屏幕范围，并添加滚动功能，即使在键盘弹出时也能正常显示所有内容。

适配安全区域：通过设置safe-area-inset-bottom="true"，确保弹窗在有底部安全区域的设备上也能正确显示，避免布局异常。

总结

通过以上修改，我们成功解决了uni-app中手机端键盘弹出导致页面抖动的问题。这些修改不仅提升了用户体验，也为跨平台开发中的类似问题提供了通用的解决方案。

在实际开发中，我们还需要注意以下几点：

跨平台兼容性：确保修改在iOS、Android等不同平台上都能正常工作。

设备适配：考虑不同屏幕尺寸和分辨率的设备，确保布局在各种情况下都能正确显示。

性能优化：避免过度的DOM操作和样式计算，确保页面流畅运行。

通过不断优化和改进，我们可以打造出更加稳定、流畅的跨平台应用，为用户提供更好的使用体验。