微信小程序如通过判断动态决定button是否禁用

Posted 2023-02-26 Kunkun只喝怡宝

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