需求:点击获取按钮进入60秒倒计时,倒计时结束前按钮禁用;倒计时结束后按钮的内容文字恢复正常,按钮状态恢复正常。
wxml部分代码如下:
<button class="sendBtn" disabled='{{disabled}}' bindtap="getCountDown">{{sendMessage}}</button>
js部分代码如下:
data: {
sendMessage: "重新发送",//按钮的默认文字内容
countTime: 60,//倒计时
disabled:""//按钮是否禁用
},
//倒计时
getCountDown: function(that){
//获取倒计时的变量
var time = parseInt(this.data.countTime);
const countDown = setInterval(() => {
if(time==0){
this.setData({
sendMessage: "重新发送",
disabled:""
})
//清除定时器
clearInterval(countDown);
}else{
time--;
this.setData({
sendMessage: time + "s",
disabled:"disabled"
})
}
}, 1000)
}
最终效果如图: