1***@qq.com
1***@qq.com
  • 发布:2019-08-05 19:26
  • 更新:2023-12-26 13:28
  • 阅读:11486

uniapp input 绑定v-model 获取数据在支付宝小程序中输入体验不好

分类:uni-app

前言
最近在使用uniapp制作支付宝小程序,遇到一个很有意思却让人苦恼的BUG,支付宝小程序对vue的支持并不友好,以至于部分vue指定在经过uniapp编译打包成小程序后,小程序并不支持。
问题:
我们在做登录页面需要在 input 里输入值,v-model 双向绑定到 data中,

<input type="text" value="" class="username" placeholder="请填写手机号" v-model="username"/>  
<input type="text" value="" class=" password" placeholder="请输入你的密码" v-model="passWord"/>
 到这里时原以为自写的代码天衣无缝,运行H5端没问题,运行在微信小程序没问题,真机测试没问题,支付宝小程序IDE也没问题,担当用支付宝小程序IDE的真机调试,完犊子了,输入框的光标出现跳动,删除时不能全部删除,总之输入体验极其不好,可是在慢速输入下没有问题。  
 为解决这个问题,我下载了uniapp官方的登录模板在支付宝小程序IDE下真机调试,还是会出现这种问题。  
 这里再调侃一下支付宝小程序的社区那是真的 “好” “好的不得了” 当天提出问题,回答问题的客服 “热情高涨” “恢复信息也很快” 解决办法让我 **使用支付宝小程序支持的代码*重写***  
 这个问题看似都不是问题的问题,造就了输入体验极差。究其根本就是支付宝小程序对vue的支持不友好导致的。我们需要绕过**v-model**使用其他办法 **@input**  

献上代码

<input type="text" value="" class="username" placeholder="请填写手机号"  @input="getUsername"/>  
<input type="text" value="" class=" password" placeholder="请输入你的密码" @input="getPassWord"/>  

// data中  
data() {  
        return {  
            ischecked: false,  
            userName : '',  
            passWord : ''  
        }  
    }  
//methods中  
methods:{  

        getUsername:function(event){  
            // 绕过v-model 获取input输入框的值  
            this.userName = event.detail.value  
            console.log(this.userName)  
        }

即可不使用v-model获取input的值

1 关注 分享
c***@foxmail.com

要回复文章请先登录注册

z***@163.com

z***@163.com

都2023年了,你说的这个问题,在平板应用上也有,我们是打包成安卓应用的,但反馈总有这个问题,这个推测还是uniapp底层赋值刷新的问题,和支付宝应该没啥关系的
2023-12-26 13:28
7***@qq.com

7***@qq.com

回复 7***@qq.com :
HbuilderX 版本是2.8.13
2021-04-20 10:11
7***@qq.com

7***@qq.com

回复 DCloud_UNI_FXY :
企业微信也是这样子,IOS手机
2021-04-20 10:09
8***@qq.com

8***@qq.com

:value 不行吗?
2019-09-18 08:54
2***@qq.com

2***@qq.com

this[key]=val
data赋值支持这样写的 就不用写多个方法了
2019-08-19 18:25
1***@qq.com

1***@qq.com (作者)

回复 DCloud_UNI_FXY :
可能没有理解我的逻辑,我是需要 输值 -> 取值,但是input加上 v-model属性后输入值都成问题,何谈取值呢?即使取值没问题,可是使用用户会怎么想呢?程序员以用户使用体验为主要原则。用户体验不好最终还是要替换掉v-model。 归根揭底支付宝底层实现不好, 或许后期在需要给input重新赋值,那么使用v-model还是会出现如此问题,使用它还有什么意义呢?
2019-08-19 18:02
d***@foxmail.com

d***@foxmail.com

这个问题官方能不能做一下优化,等支付宝修改肯定是靠不住了
2019-08-14 16:52
DCloud_UNI_FXY

DCloud_UNI_FXY

v-model 的实现,是监听 input 事件,取值,重新赋值 input
你的解决方案,只是取值,没有赋值给 input
当你的业务不需要 v-model 时,可以这样简单监听 input,拿到值就行了。一旦你还需要给 input 主动赋值,应该也会遇到这个问题,不过自行实现的时候,可以考虑延迟一下赋值,估计支付宝底层实现的不好,导致取值,再立马赋值光标闪烁
2019-08-05 19:52