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

Posted 2022-03-15 Kunkun只喝怡宝

1. 效果演示

试了一下上传不了视频。。。

2. 原理

原理就是给button的disabled属性绑定数据，然后通过给input绑定点击事件，判断输入框输入值的长度来动态改变disabled的属性，以及button的背景颜色。

3. 代码

wxml代码

<!--pages/sendSms/sendSms.wxml-->
<view class="send_sms">
  <input type="number" class="phone" placeholder="请输入手机号" bindinput="phoneInput"/>
  <button class="getSms" style="color: color1;" disabled="disable1">获取验证码</button>
  <input type="number" class="sms" placeholder="请输入验证码" bindinput="smsInput"/>
  <button class="login" style="color: color2; background: background;" disabled="disable2">登录</button>
</view>

wxss代码

/* pages/sendSms/sendSms.wxss */
.send_sms
  position: relative;

input
  width: 600rpx;
  height: 100rpx;
  font-size: medium;
  margin: 0 auto;
  border-bottom: 1rpx solid #cdcdcd;

.getSms
  position: absolute;
  font-size: small;
  background-color: #fff;
  color: #cdcdcd;
  top: 20rpx;
  right: 5rpx;

.getSms::after
  border: none;

.login
  width: 600rpx;
  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"
      )
    
  ,