微信小程序自定义定时器，倒计时触发事件，setInterval使用

清风云翼

已于 2022-08-26 10:50:56 修改

阅读量1k

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

于 2022-07-26 19:43:41 首次发布

本文链接：https://blog.csdn.net/mrcaoyongkang/article/details/126001909

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如果我的文章有帮到大家，希望点个赞再走
上代码！

wxml

<radio class="modal-radio {{countdown!==0 ? 'gayColor':'blueColor'}}"  disabled="{{ countdown!==0 }}">
    <text>已阅</text>
    <text style="margin-left: 20px;" wx:if="{{yddjs!==0}}">({{countdown}})</text>
 </radio>

data{
  countdown:30 //30秒
}
onLoad(){
 this.initCount()
}
initCount() { //初始化倒计时
    let that = this;
    let clock = setInterval(() => {
      if(that.data.countdown === 0) {
        clearInterval(clock);//清除周期
      }else {
        that.data.countdown--
        that.setData({countdown: that.data.countdown})
      }
    }, 1000);
  },

wxss

.modal-radio{
 margin-left: 50rpx;
 margin-top: 100rpx;
}
.gayColor {
  color: #666;
}
.blueColor {
  color: #348AE9;
}
radio .wx-radio-input{
  border-radius: 10%;/* 圆角 */
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}