微信小程序——实现发送验证码按钮效果

首先上图，最终效果如下：

实现关键点

• 获取验证码按钮

  无边框

  ： 可以用

  button::after{ border: none; } 来去除边框

  ，或者直接用

  view

  绑定点击事件。本例子中没有使用button
• 点击发送后，60秒内按钮处于

  disable

  状态
• 点击发送后，text分为

  剩余秒数

  和

  后缀

  两部分

• .form_group

  使用 flex 布局

代码

.wxml

<view class="form_group">
<input type="text" class="sendmsg_input" placeholder="短信验证码" placeholder-class="placeholder_style" />
<view class='vertificate' bindtap="getVerificationCode">{{time}}
<text>{{suffix}}</text>
</view>
</view>

.wxss

.form_group {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.form_group input, .form_group picker {
width: 676rpx;
border-bottom: 1px solid #ddd;
height: 121rpx;
padding-left: 20rpx;
font-family: PingFangSC-Regular;
font-size: 32rpx;
letter-spacing: 0;
line-height: 121rpx;
}

.form_group .sendmsg_input {
width: 370rpx;
}

.form_group .vertificate {
width: 326rpx;
border-bottom: 1px solid #ddd;
height: 121rpx;
padding-left: 20rpx;
font-family: PingFangSC-Regular;
font-size: 32rpx;
letter-spacing: 0;
line-height: 121rpx;
text-align: center;
color: #34c9c3;
}

.vertificate text {
color: gray;
}

.placeholder_style {
font-family: PingFangSC-Regular;
font-size: 32rpx;
color: #dbdbdb;
letter-spacing: 0;
}

.js

Page({
data: {
time: "获取验证码",
currentTime: 61,
disabled:false,
suffix:'',
},

...

getCode(options){
let that = this;
let interval = null;
let currentTime = that.data.currentTime
interval = setInterval(function () {
currentTime--;
that.setData({
time: currentTime,
suffix:'秒后可重新获取'
})
if (currentTime <= 0) {
clearInterval(interval)
that.setData({
time: '重新发送',
suffix: '',
currentTime: 61,
disabled: false
})
}
}, 1000)
},
getVerificationCode() {
let _this = this;
if(!_this.data.disabled){
_this.getCode();
_this.setData({
disabled: true
})
}
}
})