微信小程序源碼解析：數(shù)字累加，動(dòng)態(tài)效果（附demo）
發(fā)布時(shí)間：2018-04-08 12:06 所屬欄目：小程序開發(fā)教程
微信小程序-數(shù)字累加效果，實(shí)現(xiàn)方式都在注釋里面，有不足之處希望老司機(jī)多多指點(diǎn)  1、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>
2、index.js代碼：
// pages/main/index.js
import NumberAnimate from "../../utils/NumberAnimate";
Page({
data:{
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
},
//調(diào)用NumberAnimate.js中NumberAnimate實(shí)例化對(duì)象，測(cè)試3種效果
animate:function(){
this.setData({
num1:'',
num2:'',
num3:'',
num1Complete:'',
num2Complete:'',
num3Complete:''
});
let num1 = 18362.856;
let n1 = new NumberAnimate({
from:num1,//開始時(shí)的數(shù)字
speed:2000,// 總時(shí)間
refreshTime:100,// 刷新一次的時(shí)間
decimals:3,//小數(shù)點(diǎn)后的位數(shù)
onUpdate:()=>{//更新回調(diào)函數(shù)
this.setData({
num1:n1.tempValue
});
},
onComplete:()=>{//完成回調(diào)函數(shù)
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:" 完成了"
});
}
});
}
})
3、NumberAnimate.js代碼：
/**
* Created by wangyy on 2016/12/26.
*/
'use strict';
class NumberAnimate {
constructor(opt) {
let def = {
from:50,//開始時(shí)的數(shù)字
speed:2000,// 總時(shí)間
refreshTime:100,// 刷新一次的時(shí)間
decimals:2,// 小數(shù)點(diǎn)后的位數(shù)
onUpdate:function(){}, // 更新時(shí)回調(diào)函數(shù)
onComplete:function(){} // 完成時(shí)回調(diào)函數(shù)
}
this.tempValue = 0;//累加變量值
this.opt = Object.assign(def,opt);//assign傳入配置參數(shù)
this.loopCount = 0;//循環(huán)次數(shù)計(jì)數(shù)
this.loops = Math.ceil(this.opt.speed/this.opt.refreshTime);//數(shù)字累加次數(shù)
this.increment = (this.opt.from/this.loops);//每次累加的值
this.interval = null;//計(jì)時(shí)器對(duì)象
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的小數(shù)累加精度問題
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;
|
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉(cāng)庫(kù):
本文地址：http://www.xiuhaier.com/wxmini/doc/course/23166.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
