微信小程序之获取验证码js

在微信小程序中怎样实现获取验证码的倒计时功能捏,倒计时的原理是一样一样的,就是某些地方需要注意。

第一步:结构

<view class='getcode' wx:if="{{isGet == false}}" bindtap='getCode'>获取验证码</view>
<view class='getcode' wx:if="{{isGet == true}}">{{sec}}s后重新发送</view>

注意:微信小程序中要用到两个按钮,不像HTML里面直接一个按钮就解决了。如果非要一个按钮的话,就需要把不变的内容即“获取验证码”与“秒后重新发送”装在一个数组里面,然后判断什么时候选择显示哪一个

  备注:用wx:if条件渲染来判断某个按钮是否显示与隐藏。。{{ sec }}是要动态显示的秒数,只绑定一个view的点击事件就不怕重复点击了。。。

第二步:样式就不用说了,自己定义,  然后js代码:

// pages/mine/wallet/getcash/getcash.js
Page({
  data: {
    isGet: false,
    sec: 30
  },
  getCode () {
    var self = this
    self.setData({isGet: true})
    var remain = 30;
    var time = setInterval(function() {
      if (remain == 1) {
        clearInterval(time)
        self.setData({
          sec: 30,
          isGet: false
        })
        return false
      }
      remain --;
      self.setData({
        sec: remain
      })
    }, 1000)
  }
})

最后就成功了。

是不是很简单,用习惯了vue的小伙伴一开始写这个是不是会没思路呢哈哈



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值