发送验证码倒计时的方法很常见在项目里面也经常会多次用到这时就要把倒计时封装为组件快照更新这时就要把倒计时封装为组件需要用到的时候方便使用。
自定义组件
需要封装一个组件首先要熟悉小程序自定义组件的文档。官方文档在这里
倒计时组件
为了方便描述我把页面定义为父组件把倒计时组件定义为子组件吧。
首先需要清楚子组件与父组件之间事件的响应方法例如：子组件响应父组件的事件子组件修改父组件的data属性等。
小程序没有像Vue里面的watch模式也没有computed计算属性但是还好小程序properties里有observer官方文档说observer表示属性值被更改时的响应函数那这样就好办了。
当子组件倒计时完成之后需要告诉父组件子组件已经完成了倒计时这里可以用到方法传递的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
})
}
}
})
复制代码
结语