教大家如何使用微信小程序数字滚动插件

用es6语法方式写了个微信小程序小插件–数字滚动；

效果图：

<!--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>

// 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:" 完成了"        });      }    });   }})

/**   * 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;

使用jQuery实现立体式数字滚动条增加效果实例

以上就是教大家如何使用微信小程序数字滚动插件的详细内容，更多内容请关注技术你好其它相关文章！