微信小程序源码解析：数字累加,动态效果（附演示)

微信小程序-数字累加效果，实现方式都在注释里面，有不足之处希望老司机多多指点 1、wxml代码！-页面/主页面/索引。wxml-view class=' animate-number ' view class=' num num 1 ' { num 1 } } { { num 1 complete } }/view view class=' num num 2 ' { num 2 complete } }/view class={ { num 3 complete } }/view view class=' BTN-box '按钮bind tap=' animate ' type=' primary ' class=' button '单击me/button /view/view2，index.js .代码：//page/main/index。' jsimport number animate from '././utils/NumberAnimate '；页面({ data: { }，onLoad:function(选项){ //页面初始化选择为页面跳转所带来的参数}，onReady:function(){}，onShow:function(){ //页面显示}，onHide:function(){ //页面隐藏}，onUnload:function(){ //页面关闭},//调用NumberAnimate.js中数字动画实例化对象，测试3种效果动画：函数(){ this。setdata({ num 1: ' '，num2: ' '，num3: ' '，num1Complete: ' '，num2Complete: ' '，num 3 complete : ' ' })；设num1=18362.856让n1=新数字动画({ from:num1，//开始时的数字speed:2000，//总时间刷新时间：100,//刷新一次的时间分米：3,//小数点后的位数onupdates :()={//更新回调函数这个。setdata({ num 1: n1。TempValue })；}，onComplete:()={//完成回调函数这个。setdata({ num1 complete : '完成了' });} });设num2=13388让n2=新数字动画({ from:num2，speed:1500，decimals:0，refreshTime:100，onupdates :()={ this。setdata({ num 2:n 2。temp value })；}，在完整的：()={ this。setdata({ num 2 complete : '完成了' });} });设num3=2123655255888.86让n3=新数字动画({ from : num 3，speed:2000，refreshTime:100，decimals:2，onupdates :()={ this。setdata({ num :n 3。temp value })；}，在完整的：()={ this。setdata({ num 3 complete : '完成了' });} });}})