uni-app 弹出层 popup 中 input 组件抖动 bug

uni-app 弹出层 popup 中 input 组件抖动 bug

产品分类：

uniapp/小程序/微信

PC开发环境操作系统：

Mac

PC开发环境操作系统版本号：

12

HBuilderX类型：

正式

HBuilderX版本号：

3.4.10

第三方开发者工具版本号：

最新

基础库版本号：

最新

项目创建方式：

HBuilderX

App下载地址或H5网址：

官方演示小程序就是这样

示例代码：

未弹出页面的时候会弹出键盘 弹出层弹出后input组件中的文字会抖动
官方演示小程序就是这样

操作步骤：

未弹出页面的时候会弹出键盘 弹出层弹出后input组件中的文字会抖动
官方演示小程序就是这样

预期结果：

未弹出页面的时候会弹出键盘 弹出层弹出后input组件中的文字会抖动
官方演示小程序就是这样

实际结果：

未弹出页面的时候会弹出键盘 弹出层弹出后input组件中的文字会抖动
官方演示小程序就是这样


更多关于uni-app 弹出层 popup 中 input 组件抖动 bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这是微信小程序实现的限制，因为微信小程序input获取焦点后切换为原生组件，不一定能和之前占位组件完全重合。
可以反馈到微信小程序社区，看有没有改进计划或者方式。

更多关于uni-app 弹出层 popup 中 input 组件抖动 bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 UniApp 开发时，弹出层（Popup）中的 input 组件可能会出现抖动（抖动通常表现为输入框在失去焦点或获取焦点时有明显的跳动或闪烁）。这种问题通常与以下原因有关：

1. 软键盘弹出导致布局变化

当 input 获取焦点时，软键盘会自动弹出，可能会导致页面高度变化，从而引发 input 组件抖动。

解决方案：

  • 使用 position: fixed 来固定弹出层，避免布局变化。
  • 在弹出层中设置 :adjust-position="false"，禁用软键盘弹出时的自动调整。
<uni-popup ref="popup" type="bottom" :adjust-position="false">
  <input type="text" placeholder="请输入内容" />
</uni-popup>

2. CSS 样式问题

input 组件的样式（如 padding、margin、border 等）可能导致布局计算错误，从而引发抖动。

解决方案：

  • 检查并调整 input 的样式，确保其布局稳定。
  • 避免使用 transform 或 transition 等可能导致重排的属性。
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box; /* 确保宽度计算包含 padding 和 border */
}

3. 弹出层动画问题

弹出层的动画（如 slide-up 或 fade）可能会影响 input 的布局，导致抖动。

解决方案：

  • 禁用弹出层的动画，或调整动画的过渡效果。
  • 使用更平滑的动画，避免快速变化。
<uni-popup ref="popup" type="bottom" :animation="false">
  <input type="text" placeholder="请输入内容" />
</uni-popup>

4. 页面滚动问题

如果页面内容过多，弹出层中的 input 获取焦点时可能会导致页面滚动，从而引发抖动。

解决方案：

  • 在弹出层中禁用页面滚动。
  • 使用 scroll-view 包裹弹出层内容，并设置高度。
<uni-popup ref="popup" type="bottom">
  <scroll-view scroll-y style="height: 300px;">
    <input type="text" placeholder="请输入内容" />
  </scroll-view>
</uni-popup>

5. UniApp 版本问题

某些 UniApp 版本可能存在兼容性问题，导致 input 组件在弹出层中抖动。

解决方案：

  • 更新 UniApp 到最新版本。
  • 如果问题仍未解决，可以尝试使用第三方插件或自定义组件。

6. 自定义解决方案

如果以上方法均无效，可以尝试以下自定义解决方案：

  • 在 input 获取焦点时，手动调整页面布局。
  • 使用 focus 和 blur 事件监听器，动态调整弹出层位置。
<template>
  <uni-popup ref="popup" type="bottom">
    <input
      type="text"
      placeholder="请输入内容"
      @focus="handleFocus"
      @blur="handleBlur"
    />
  </uni-popup>
</template>

<script>
export default {
  methods: {
    handleFocus() {
      // 获取焦点时调整布局
      document.body.style.overflow = 'hidden';
    },
    handleBlur() {
      // 失去焦点时恢复布局
      document.body.style.overflow = 'auto';
    },
  },
};
</script>
回到顶部