用es6语法方式写了个微信小程序小插件–数字滚动;
效果图:
![](http://imxiaochengxu.b0.upaiyun.com/usr/uploads/2017/01/05/1483592042802709.gif!default)
wxml页面布局代码:
<!--pages/main/index.wxml--><view class="animate-number"> | <view class="num num1">{{num1}}{{num1Complete}}</view> | <view class="num num2">{{num2}}{{num2Complete}}</view> | <view class="num num3">{{num3}}{{num3Complete}}</view> | <view class="btn-box"> | <button bindtap="animate" type="primary" class="button">click me</button> | </view></view> |
|
index.js调用NumberAnimate.js
// pages/main/index.jsimport NumberAnimate from "../../utils/NumberAnimate";Page({ | data:{ | | }, | onLoad:function(options){ | // 页面初始化 options为页面跳转所带来的参数 | | }, | onReady:function(){ | | }, | onShow:function(){ | | // 页面显示 | }, | onHide:function(){ | // 页面隐藏 | }, | | onUnload:function(){ | // 页面关闭 | | }, | //调用NumberAnimate.js中NumberAnimate实例化对象,测试3种效果 | animate:function(){ | | this.setData({ | num1:'', | num2:'', | num3:'', | num1Complete:'', | num2Complete:'', | num3Complete:'' | }); | | let num1 = 18362.856; | let n1 = new NumberAnimate({ | from:num1,//开始时的数字 | speed:2000,// 总时间 | refreshTime:100,// 刷新一次的时间 | decimals:3,//小数点后的位数 | onUpdate:()=>{//更新回调函数 | this.setData({ | num1:n1.tempValue }); | }, | onComplete:()=>{//完成回调函数 | this.setData({ | num1Complete:" 完成了" | }); | } | }); | | let num2 = 13388; | let n2 = new NumberAnimate({ | from:num2, | speed:1500, | decimals:0, | refreshTime:100, | onUpdate:()=>{ | this.setData({ | num2:n2.tempValue }); | }, | onComplete:()=>{ | this.setData({ | num2Complete:" 完成了" | }); | } | }); | | let num3 = 2123655255888.86; | let n3 = new NumberAnimate({ | from:num3, | speed:2000, | refreshTime:100, | decimals:2, | onUpdate:()=>{ | this.setData({ | num3:n3.tempValue }); | }, | onComplete:()=>{ | this.setData({ | num3Complete:" 完成了" | }); | } | }); | }}) |
|
NumberAnimate.js代码:
/** | * Created by wangyy on 2016/12/26. | */'use strict';class NumberAnimate { | | constructor(opt) { | let def = { | from:50,//开始时的数字 | speed:2000,// 总时间 | refreshTime:100,// 刷新一次的时间 | decimals:2,// 小数点后的位数 | onUpdate:function(){}, // 更新时回调函数 | onComplete:function(){} // 完成时回调函数 | } | this.tempValue = 0;//累加变量值 | this.opt = Object.assign(def,opt);//assign传入配置参数 | this.loopCount = 0;//循环次数计数 | this.loops = Math.ceil(this.opt.speed/this.opt.refreshTime);//数字累加次数 | this.increment = (this.opt.from/this.loops);//每次累加的值 | this.interval = null;//计时器对象 | this.init(); | } | init(){ | this.interval = setInterval(()=>{this.updateTimer()},this.opt.refreshTime); | } | | updateTimer(){ | | this.loopCount++; | this.tempValue = this.formatFloat(this.tempValue,this.increment).toFixed(this.opt.decimals); | if(this.loopCount >= this.loops){ | clearInterval(this.interval); | this.tempValue = this.opt.from; | this.opt.onComplete(); | } | this.opt.onUpdate(); | } | //解决0.1+0.2不等于0.3的小数累加精度问题 | formatFloat(num1, num2) { | let baseNum, baseNum1, baseNum2; | try { | baseNum1 = num1.toString().split(".")[1].length; | } catch (e) { | baseNum1 = 0; | } | try { | baseNum2 = num2.toString().split(".")[1].length; | } catch (e) { | baseNum2 = 0; | } | baseNum = Math.pow(10, Math.max(baseNum1, baseNum2)); | return (num1 * baseNum + num2 * baseNum) / baseNum; | };}export default NumberAnimate; |
|