uni-app input组件在手机端输入赋值时无法及时更新数据

uni-app input组件在手机端输入赋值时无法及时更新数据

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

示例代码：

<view class="itemBox">  
    <input type="text" :value="account" @blur="getAccount" @input="accountStatus($event, 'account')" placeholder="请输入手机">  
</view>  
<view class="itemBox mb0">  
    <input :password="true" :value="password" @blur="getPassword" @input="accountStatus($event, 'password')" placeholder="请输入登录密码">  
</view>

操作步骤：

// 校验账号或电话是否为空  
accountStatus(e, flag) {  
    console.log(e);  
    if(flag == 'account'){  
        let accountText = "";  
        setTimeout(() =>{this.getValue(flag,e.detail.value);}, 10);  
        // this.getValue(flag,e.detail.value);  
        if (e.detail.value) {  
            this.isAccount = true;  
        } else {  
            this.isAccount = false;  
        }  
        if (this.isAccount && this.isPassword) {  
            this.disabledLogin = false;  
            this.customStyle.backgroundColor = "#0883FD !important";  
        } else if (!this.isAccount || !this.isPassword) {  
            this.disabledLogin = true;  
            this.customStyle.backgroundColor = "rgba(8,131,253, 0.3) !important";  
        }  
    } else if(flag == 'password'){  
        let passwordText = "";  
        setTimeout(() =>{passwordText = e.detail.value}, 0);  
        this.getValue(flag,e.detail.value);  
        if (e.detail.value) {  
            this.isPassword = true;  
        } else {  
            this.isPassword = false;  
        }  
        if (this.isAccount && this.isPassword) {  
            this.disabledLogin = false;  
            this.customStyle.backgroundColor = "#0883FD !important";  
        } else if (!this.isAccount || !this.isPassword) {  
            this.disabledLogin = true;  
            this.customStyle.backgroundColor = "rgba(8,131,253, 0.3) !important";  
        }  
    }  
},

更多关于uni-app input组件在手机端输入赋值时无法及时更新数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

这是这个组件就有问题，而且很久了习惯了，因为你在更新那个value值，删除也是在实时更新这个值就会跟不上视图的反应速度，删除速度很快的，所以这个更新这个值的时候太慢跟不上，就会有删除的幻影。反正我是直接定义两个值，去交互使用。

更多关于uni-app input组件在手机端输入赋值时无法及时更新数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html


定义的两个值怎么交互使用？可以具体说下吗？

回复 2***@qq.com: 比如:value=“account” ，定义一个account2，你现在去执行修改@input执行的时候，其实在input 上改和删除都是把值传给account2，至于account是只用来刚进来的时候赋值上去而已，执行@input的时候不用重复去赋值给account这个值，不然就会出现缓慢的视图重复更新视觉，你要先弄清楚你的这个情况是怎样出现，我也不确定你是不是我说的这种情况。

回复 木杉丶: 好的，谢谢您的答复，不过咱们可能就是一种情况，嘻嘻。

可以贴下代码？

更新要用this.$nextTick,哈哈,不过会有闪烁问题,input没有html5的好用

从代码分析来看，数据更新延迟问题主要出现在accountStatus方法中的异步处理逻辑上。

在account分支中使用了setTimeout延迟10ms执行getValue，这会破坏数据的同步更新。而在password分支中虽然也有setTimeout，但passwordText变量赋值后并未实际使用，同时立即执行了getValue，逻辑不一致。

建议采用以下优化方案：

  1. 统一使用v-model双向绑定
<input type="text" v-model="account" @input="accountStatus($event, 'account')">
<input :password="true" v-model="password" @input="accountStatus($event, 'password')">
  1. 简化accountStatus方法
accountStatus(e, flag) {
    const value = e.detail.value;
    
    // 直接更新对应状态
    if(flag === 'account') {
        this.isAccount = !!value;
    } else if(flag === 'password') {
        this.isPassword = !!value;
    }
    
    // 统一处理登录按钮状态
    this.updateLoginButtonState();
},

updateLoginButtonState() {
    this.disabledLogin = !(this.isAccount && this.isPassword);
    this.customStyle.backgroundColor = this.disabledLogin 
        ? "rgba(8,131,253, 0.3) !important" 
        : "#0883FD !important";
}
回到顶部