【移动应用开发技术】使用小程序数字滚动插件的方法

【移动应用开发技术】使用小程序数字滚动插件的方法

这篇文章主要介绍了使用小程序数字滚动插件的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让在下带着大家一起了解一下。用es6语法方式写了个微信小程序小插件–数字滚动；效果图：wxml页面布局代码：<!s/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);//每次累加的值

erval

=

null;//计时器对象

this.init();

}

init(){

erval

=

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(erval);

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)

{