在鸿蒙微信小程序里,taro Input组件 输入框输入快了或按住删除键不放字会来回抖动,不能正常输入或删除;鸿蒙微信小程序中用微信小程序原生组件试了下,相同场景下没有抖动问题
相关平台
微信小程序
小程序基础库: 3.5.8 使用框架: React
复现步骤
在鸿蒙微信小程序中,输入快了之后或者按住删除键不放,输入框的字会来回抖动,不能正常输入或删除
重现链接:https://github.com/rabbit77/demo-taro-input/tree/main/src (用taro 原生的Input组件就可以复现,但是放到上边的重现链接提交不了,放到重现步骤里提交了)
期望结果
跟原生微信小程序input组件效果一致,快速输入或删除不会抖动
实际结果
在鸿蒙微信小程序中,连续输入输入框会抖动
环境信息
Taro v4.0.6
Taro CLI 4.0.6 environment info:
System:
OS: macOS 14.4
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.18.0 - /usr/local/bin/node
Yarn: 1.22.22 - /opt/homebrew/bin/yarn
npm: 10.8.2 - /usr/local/bin/npm
npmPackages:
@tarojs/cli: 3.6.15 => 3.6.15
@tarojs/components: 3.6.15 => 3.6.15
@tarojs/helper: 3.6.15 => 3.6.15
@tarojs/plugin-framework-react: 3.6.15 => 3.6.15
@tarojs/plugin-inject: 3.6.15 => 3.6.15
@tarojs/plugin-mini-ci: 3.6.15 => 3.6.15
@tarojs/plugin-platform-alipay: 3.6.15 => 3.6.15
@tarojs/plugin-platform-h5: 3.6.15 => 3.6.15
@tarojs/plugin-platform-jd: 3.6.15 => 3.6.15
@tarojs/plugin-platform-qq: 3.6.15 => 3.6.15
@tarojs/plugin-platform-swan: 3.6.15 => 3.6.15
@tarojs/plugin-platform-tt: 3.6.15 => 3.6.15
@tarojs/plugin-platform-weapp: 3.6.15 => 3.6.15
@tarojs/react: 3.6.15 => 3.6.15
@tarojs/runtime: 3.6.15 => 3.6.15
@tarojs/shared: 3.6.15 => 3.6.15
@tarojs/taro: 3.6.15 => 3.6.15
@tarojs/webpack5-runner: 3.6.15 => 3.6.15
babel-preset-taro: 3.6.15 => 3.6.15
eslint-config-taro: 3.6.15 => 3.6.15
react: ^18.2.0 => 18.3.1
补充信息
业务场景:微信鸿蒙小程序,在表单中,业务中使用时value赋值又用onInput事件赋值setValue。 可能原因:setValue是异步方法,onInput时,setValue赋值给value再展示,可能是异步导致的。
请问 Android 和 iOS 的微信小程序有没有这个问题
用 CustomWrapper 组件包一下,不过包裹后,输入框的宽度得自己计算一下,样式不会继承了的
import { CustomWrapper } from '@tarojs/components';
<CustomWrapper>
<Input
{...filedProps}
className="w-[335px]"
maxLength={field.maxLength || 100}
placeholder={field.placeholder || t_UNSAFE('PLEASE_FILL', '请填写')}
/>
</CustomWrapper>
Android 和 iOS 的微信小程序没有这个问题,鸿蒙的微信小程序非常明显
用CustomWrapper改动成本有点大,还能帮看下有什么统一解决方案吗
貌似是光标定位问题,把
cursor={-1} 设置-1就能fix了
貌似是光标定位问题,把
cursor={-1}设置-1就能fix了
依然会光标乱跳,尤其是在低端机型(iPhone 6系列)非常明显