用es6语法方式写了个微信小程序小插件–数字滚动；效果图： 
- wxml页面布局代码：
- {{num1}}{{num1Complete}}{{num2}}{{num2Complete}}{{num3}}{{num3Complete}}click me
- 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;
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
