微信小程序数字滚动插件使用详解

微信小程序数字滚动插件使用详解

用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(){}, // 更新时回调http://函数

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;

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。