您当前的位置: 首页 > 解决方案

小程序 - 验证码倒计时组件

  • 作者: admin
  • 发布于 2018-12-27 10:31:12
  • 来源:  
  • 栏目:解决方案

导语: 发送验证码倒计时的方法很常见,在项目里面也经常会多次用到,这时就要把倒计时封装为组件,需要用到的时候方便使用。

 

发送验证码倒计时的方法很常见,在项目里面也经常会多次用到,这时就要把倒计时封装为组件,需要用到的时候方便使用。

自定义组件

需要封装一个组件,首先要熟悉小程序自定义组件的文档。官方文档在这里

倒计时组件

为了方便描述,我把页面定义为父组件,把倒计时组件定义为子组件吧。

首先需要清楚子组件与父组件之间事件的响应方法,例如:子组件响应父组件的事件,子组件修改父组件的data属性等。

  1. 小程序没有像Vue里面的watch模式也没有computed计算属性,但是还好小程序properties里有observer,官方文档说observer表示属性值被更改时的响应函数,那这样就好办了。
  2. 当子组件倒计时完成之后,需要告诉父组件,子组件已经完成了倒计时,这里可以用到方法传递的e.detail来处理。

子组件代码

countdown.js

Component({   /**    * 组件的属性列表    */   properties: {     // 是否开始倒计时     start: {       type: Boolean,       value: false,       observer(newVal){         if (newVal === true) {           this.countdownFunc()         }       }     }   },    /**    * 组件的初始数据    */   data: {     timerText: '获取验证码'   },    /**    * 组件的方法列表    */   methods: {     /**      * 触发页面点击事件      */     _getCountdownEvent(){       this.triggerEvent("getCountdownEvent")     },      /**      * 触发页面修改data事件      */     _setStartDataEvent() {       this.triggerEvent("setStartDataEvent", this.data.start)     },      /**      * 倒计时      */     countdownFunc() {        this.setData({         timerText: 60       })       let target = this       let countdownNum = target.data.timerText        let timer = setInterval(() => {         countdownNum--          target.setData({           timerText: countdownNum         })          if (countdownNum == 0) {           target.setData({             timerText: '重新发送',             start: false           })            this._setStartDataEvent() //倒计时为0时,让父组件的start重新设置为false                      clearInterval(timer) //清除定时器         }        }, 1000)     }   } }) 复制代码

显示的倒计时(timerText)可以根据自己需求重新修改。
countdown.wxml

<view bindtap="_getCountdownEvent">{{timerText}}{{start?'s后重试':''}}</view> 复制代码

页面使用

调用组件需要在相应的json文件里面注册,这个我就不说了。

父组件代码

sendRandom.wxml

<countdown id="sendRandom"      start="{{start}}"     bind:getCountdownEvent="_getCountdownEvent"     bind:setStartDataEvent="_setStartDataEvent"     > </countdown> 复制代码

sendRandom.js

Page({    /**    * 页面的初始数据    */   data: {     start: false   },    /**    * 点击获取验证码    */   _getCountdownEvent(e) {      // todo: 点击获取验证码之后,可以根据自己的需求,通知子组件可以开始倒计时了   // 如: 向后台请求发送验证码的方法,请求成功之后将start设置为true,表示倒计时开始了。          if (this.data.start === true) {       return     }     this.setData({       start: true     })   },    /**    * 倒计时结束 设置setData为false    */   _setStartDataEvent(e){     if (e.detail === false) {       this.setData({         start: false       })     }   }    }) 复制代码

结语

以上是根据自己公司的需求封装的倒计时组件,写得不够优雅,只是想记录一下小程序自定义组件的互相传值和事件响应。如有更好的方法可以提供下思路。

 



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部