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

前端之家收集整理的这篇文章主要介绍了微信小程序数字滚动插件使用详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

效果图:

wxml页面布局代码

Box">

index.js调用NumberAnimate.js

// 页面显示
},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,decimals:2,onUpdate:()=>{
this.setData({
num3:n3.tempValue });
},onComplete:()=>{
this.setData({
num3Complete:" 完成了"
});
}
});
}})

NumberAnimate.js代码

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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/weapp/33891.html

猜你在找的微信小程序相关文章