微信小程序短信验证码不会开始倒计时,点击获取验证码按钮后不会出现读秒,
微信小程序并没有提供完整功能组件,完全可以自己实现呀,代码示例
<view class="item flex">
<input type="number" placeholder="验证码" class='input code_input' placeholder-class='placeholder' name='code' id='code' bindinput='getInputValue'/>
<button class="code_btn" bindtap='handleSendCode' disabled='{{disabled}}' size='mini'>{{disabled?time+' s':'发送验证码'}}</button>
</view>
Page({
/**
* 页面的初始数据
*/
data: {
disabled: false,
time: 60,
code: ''
},
timer: null,
//发送验证码
handleSendCode(e) {
//发送短信的方法
//sendMessageRequest().then(res=>{})
let {
time
} = this.data;
this.setData({
disabled: true
});
this.timer = setInterval(() => {
time--;
this.setData({
time
})
if (this.data.time < 0) {
clearInterval(this.timer);
this.setData({
disabled: false,
time: 60
});
}
}, 1000)
},
//获取输入框的值并设置
getInputValue(e) {
this.setData({
[e.currentTarget.id]: e.detail.value
})
}
})