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

栏目: JavaScript · 发布时间: 5年前

内容简介:发送验证码倒计时的方法很常见,在项目里面也经常会多次用到,这时就要把倒计时封装为组件,需要用到的时候方便使用。需要封装一个组件,首先要熟悉小程序自定义组件的文档。官方文档在这里为了方便描述,我把页面定义为父组件,把倒计时组件定义为子组件吧。

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

自定义组件

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

倒计时组件

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

首先需要清楚子组件与父组件之间事件的响应方法,例如:子组件响应父组件的事件,子组件修改父组件的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
      })
    }
  }
  
})
复制代码

结语

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

机械设计实践

机械设计实践

村洋太郎(日) / 王启义/等 / 机械工业出版社 / 1998-08 / 36.00

本书记述了各种设计过程的思考方法和具体作法以及必要的知识和具 体数据。介绍了设计中要决定的内容和相应的制约条件。如功能、机构、 构造、形状、力和强度、尺寸加工工艺、工具、材料、机械要素等。最后 介绍了具体设计实例。本书的目的在于即使不看其他的书和参考书就能设 计出所需要的具体机械。 本书供从事机械设计的有关技术人员及大专院校相关专业的师生使 用。一起来看看 《机械设计实践》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具