uni-app uni-popun弹框展示时input中的字体会抖动

uni-app uni-popun弹框展示时input中的字体会抖动

示例代码：

<uni-popup ref="popup" :maskClick="false" :animation="false">
<view class="bottomDialog">
<view class="dialog_title">兑换码</view>
<view class="dialog_input" 
<input
style="margin: 0 15rpx"
type="text"
maxlength="30"
v-model="code"
placeholder="请输入兑换码"
/>
<view class="dialog_button" @click="handleOk">确 认</view>
<view class="close-button">
<icon
type="cancel"
size="35"
color="#ffffff"
@click="handleReturn"
/>
</view>
</view>
</uni-popup>

操作步骤：

uni-popun 设置 :animation="true"

预期结果：

正常

实际结果：

input中文字发生抖动

bug描述：

在页面中uni-popun中使用input,在 :animation="true"时，弹框展示时input中的字体会抖动，修改为:animation="false"就不会
看到有开发者在2020年5月份就有所反馈到现在还是有问题没有解决方案
官方组件demo微信小程序上也是同样的问题

信息类别 信息内容
产品分类 uniapp/小程序/微信
PC开发环境 Mac
版本号 macOS big sur 11.5.2
HBuilderX 正式 / 3.2.12
第三方工具 1.05.2109131
基础库 2.20.1
项目创建方式 HBuilderX

附件


1635499409248769.mp4_.zip


更多关于uni-app uni-popun弹框展示时input中的字体会抖动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni-popun弹框展示时input中的字体会抖动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-popup组件在微信小程序平台上的渲染问题，主要与动画和输入框的渲染时序冲突有关。

问题原因： 当animation="true"时，uni-popup使用CSS动画展示弹窗。在微信小程序中，input组件在动画过程中可能触发多次重绘，导致字体渲染异常抖动。

解决方案：

  1. 使用官方推荐的修复方式（针对微信小程序）：
/* 在App.vue或页面样式中添加 */
uni-popup .uni-input-input {
  transition: none !important;
}
  1. 替代动画方案：
<uni-popup ref="popup" :maskClick="false" :animation="false">
<!-- 使用自定义动画 -->
<view class="bottomDialog" :class="showDialog ? 'show' : 'hide'">

配合CSS自定义动画，避免使用组件内置动画。

  1. 延迟渲染input：
<uni-popup ref="popup" :maskClick="false" :animation="true">
<view class="bottomDialog">
<view v-if="showInput">
<input ... />
</view>
</view>
</uni-popup>

// 在弹窗显示后延迟显示input
this.$refs.popup.open()
setTimeout(() => {
  this.showInput = true
}, 300)
回到顶部