1. 效果演示
上传不了视频。。。
2. 原理
原理就是给button的disabled属性绑定数据，然后通过给input绑定点击事件，判断输入框输入值的长度来动态改变disabled的属性，以及button的背景颜色。
3. 代码
wxml代码
<!--pages/sendSms/sendSms.wxml--><view class="send_sms"><view class="sms_box"><input type="number" class="phone" placeholder="请输入手机号" bindinput="phoneInput"/><button class="getSms" size="mini" style="color: {{color1}};font-size: small;" disabled="{{disable1}}" bindtap="sendSMS">获取验证码</button></view><input type="number" class="sms" placeholder="请输入验证码" bindinput="smsInput"/><button class="login" style="color: {{color2}}; background: {{background}};" disabled="{{disable2}}" bindtap="login">登录</button></view>
wxss代码
/* pages/sendSms/sendSms.wxss */.sms_box{display: flex;height: 100rpx;width: 600rpx;margin: 0 auto;align-items: center;border-bottom: 1rpx solid #cdcdcd;}.phone{display: inline-block;width: 400rpx;height: 100rpx;font-size: medium;}.getSms{display: inline-block;background-color: #fff;}.getSms::after{border: none;}.sms{width: 600rpx;height: 100rpx;font-size: medium;margin: 0 auto;border-bottom: 1rpx solid #cdcdcd;}.login{margin-top: 30rpx;}
js代码
data: {disable1:true,disable2:true,color1:"#cdcdcd",color2:"#666",background:"#cdcdcd"},phoneInput(e){if(e.detail.value.length == 11){this.setData({disable1:false,color1:"#1296db"})}else{this.setData({disable1:true,color1:"#cdcdcd"})}},smsInput(e){if(e.detail.value.length == 6){this.setData({disable2:false,color2:"#fff",background:"#1296db"})}else{this.setData({disable2:true,color2:"#666",background:"#cdcdcd"})}},
