taro 倒计时按钮组件

封装好的倒计时按钮组件 , 可自定义样式 , 避免重复造轮子 .

已测试通过 : 微信小程序 H5

原则上支持react-native 与 其他小程序 , 但在测试中发现taro(v1.3.17)在其他终端存在无法获取 ref 等情况 .

如有问题 可自行修改源码或提Issues

演示

使用方法

最小化运行示例 :

import CountDownButton from "../../components/DownButton"; countDownButtonPressed(){ //调用组件方法 开始按钮倒计时 this.countDownButton.startCountDown(); }; <CountDownButton onClick={this.countDownButtonPressed.bind(this)} ref={ref => { this.countDownButton = ref; }} ></CountDownButton>

参数示例 :

<CountDownButton onClick={this.countDownButtonPressed.bind(this)} changeWithCount={count => { countDown = count; return count + "s"; //通过传入函数 调整秒数显示格式 }} beginText='获取验证码' //初始状态按钮title endText='重新获取' //读秒结束后按钮的title count={60} //倒计时时间 activeStyle='active-count-down-btn' //传入自定义样式名 ref={ref => { this.countDownButton = ref; }} ></CountDownButton> 如不满意按钮默认样式 , 你可以打开组件下的index.css调整 .

API