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

本文主要和大家介绍微信小程序数字滚动插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

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

效果图：

wxml页面布局代码：<!--pages/main/index.wxml--><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;相关推荐：

使用jQuery实现立体式数字滚动条增加效果实例以上就是教大家如何使用微信小程序数字滚动插件的详细内容，更多请关注小潘博客其它相关文章！