uniapp input真机调试 输入数字会不断的跳动

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快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘

2、微信小程序入门与实战 常用组件API开发技巧项目实战

3、微信小程序入门与实战(最新完整版)

4、微信小程序云开发-从0打造云音乐全栈小程序 完整版

5、纯正商业级应用-微信小程序开发实战-完整无秘

6、商业级支付宝小程序入门与实战 高清无秘 百度云盘下载

更多学习教程,小月博客持续更新…

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(2) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?