这篇文章主要介绍了微信小程序数字滚动插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用es6语法方式写了个微信小程序小插件–数字滚动；
效果图：
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;
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在ztree树插件中如何实现全国五级地区点击后加载
在webpack中如何使用echarts？
javascript中object基础内部方法图（图文教程）
以上就是在微信小程序中如何使用数字滚动插件的详细内容。