uni-app popup弹框内的input内容会闪烁位移一下

uni-app popup弹框内的input内容会闪烁位移一下

操作步骤：

无

预期结果：

预期结果：打开就是正常的，页面内的输入框内容不要跳动和闪烁

实际结果：

目前输入弹出框的内容会上移一下才正常

bug描述：

【报Bug】uni-app开发的微信小程序，官方的demo小程序HelloUniapp，拓展组件页面的进入的PopUp弹出层页面；当点击输入对话框时候，弹出框内的input输入框内的问题会瞬间上移一下，无论是input还是textarea每次打开输入对话框时候都会出现这个bug；就会导致如果textarea内容过多，打开弹框的瞬间文字是超出文本框的，然后才会自动换行正常。官方的demo就可以直接看到此bug，还望修复下。

项目信息 值
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
HBuilderX类型 正式
HBuilderX版本号 3.1.17
第三方开发者工具版本号 1.05
基础库版本号 2.20
项目创建方式 HBuilderX

更多关于uni-app popup弹框内的input内容会闪烁位移一下的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

就是这个demo页面的输入弹出框


更多关于uni-app popup弹框内的input内容会闪烁位移一下的实战教程也可以访问 https://www.itying.com/category-93-b0.html


的确有这个问题，请问你解决了这个问题了吗

后面没有处理

回复 2***@qq.com: 那怎么搞 解决不了？

那怎么搞 解决不了

准确的说是抖动，这个问题只有小程序才有，跟uniapp没关系，微信那边自己也还没解决呢，多年前就有人提出来了。

这是一个已知的uni-app在微信小程序平台上的渲染问题，主要原因是弹窗组件和输入框组件的渲染时序冲突。

问题原因：

  1. 当popup弹窗显示时，内部的input/textarea组件会立即开始渲染
  2. 微信小程序的键盘弹起机制会触发页面重新布局
  3. 这两个过程几乎同时发生，导致输入框内容在初始渲染后立即被键盘弹起事件影响，产生视觉上的位移闪烁

临时解决方案：

  1. 使用v-if延迟渲染输入框
<uni-popup ref="popup">
  <view v-if="showInput">
    <input v-model="value" />
  </view>
</uni-popup>

// 在弹窗显示后延迟显示输入框
showPopup() {
  this.$refs.popup.open()
  setTimeout(() => {
    this.showInput = true
  }, 50)
}
  1. 使用fixed定位避免布局抖动
.uni-popup__content {
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
  1. 对于textarea内容过多的情况，可以预先计算高度
<textarea 
  :style="{height: textHeight + 'px'}"
  [@focus](/user/focus)="adjustTextareaHeight"
/>
回到顶部