[移动开发]微信小程序如通过判断动态决定button是否禁用

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"
      })
    }
  },