uniapp input真机调试 ios输入数字会不断的跳动
我不知道其他人有没有遇到过这样子的问题,下面我来说一下问题和解决方案吧。
问题描述:
uni-app 写微信小程序时,在input框输入数字的时候,如果重复输入一样的数字或者输入数字过快的情况下,输入框里面的内容就会出现闪跳,怎么描述呢?嗯…. , 就是会输入了不出来,然后过一会出来一堆,然后不操作input框里面的内容自己又会删除一部分。
出bug机型: IOS 手机
由于我个人在开发工具和自己的手机(安卓机)上面测试都没有发现,在上线前同事的ios手机测试出来这样子的bug。我次日就在网上搜索一下确实有人会遇到这样的问题。下面来分享一下解决方案吧。
解决方案:
网上的方案 1: 将 v-model 替换成 :value/ @input
代码如下:
<!-- 出bug的代码 --> <input type="idcard" class="input" v-model="idcard" /> <!-- 网上给出的方案 --> <input type="idcard" class="input" :value="idcard" @input="changeInput($event)" />
changeInput(e){ this.idcard = e.target.value console.log(this.idcard) },
结果: 这是网上普遍的解决方案,但是我在真机上测试的时候还是不能完全解决,输入快的时候还是会出现闪跳。(当时内心很郁闷,因为着急上线)
网上的方案 2: 利用定时器间接赋值给value
changeInput(e){ setTimeout(() => { this.idcard = e.target.value }, 0) console.log(this.idcard) },
结果:这个方案我真机测试,bug依旧,但是我看别人测试是ok的,我也不知道我的问题出在了哪里。(郁闷持续中… ….)
我自己的方案: 野路子、野路子
我不记得我在哪里看过一篇文章了,是微信原生开发小程序时遇到的bug,我就结合了一下两个bug的特性,自己写了一下,代码如下:
<!-- 出bug的代码 --> <input type="idcard" class="input" v-model="idcard" /> <!-- 我自己写的代码,亲测解决bug --> <input type="idcard" class="input" @input="changeInput($event)" />
不仔细看看不出来有什么不同,我把 :value=”idcard” 去掉了。(不要问我原因,我真不知道为啥子!!!)
JS代码:
changeInput(e){ setTimeout(() => { this.idcard = e.target.value }, 0) console.log(this.idcard) },
区别不是很大,但是就是解决了这个问题,bug一次也没有出现了,我好想知道原因啊,哪位大牛知道的话可以找我,我想要学习一下。万分感谢!
—— 微信小程序学习资源下载—–
1、uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘
更多学习教程,小月博客持续更新…