滚动数字_微信小程序，数字滚动教程（含demo）

随着微信小程序的出现，es6的追随者也越来越多了，我最近也在努力学习中，之前一直使用es5，感觉e6还是小众，没想到最近一直在研究小程序，也逛了好多论坛，发现微信小程序的好多demo都是大神们在用es6开发，顿时感觉全世界好像就我还在使用最基本的javascript语法；于是作为学习练手就用es6语法方式写了个小插件–数字滚动，不足之处还望老司机多多指点；

效果图：

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 mebutton>    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;

点下在看，小编绩效涨五毛

点击阅读原文，下载DEMO源码

↓↓↓↓