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

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

浏览量:461 时间: 来源:itskhdu

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

第一步:结构

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

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

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

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

// pages/mine/wallet/getcash/getcash.jsPage({  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的小伙伴一开始写这个是不是会没思路呢哈哈



版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎