微信小程序学习用:数字累加,动态效果

微信小程序学习用:数字累加,动态效果由小鱼微信小程序精心整理,并分享给大家。喜欢该资源的小伙伴请下载使用,注册、回复、每日签到、点赞送大量积分,满足您免费下载的愿望

微信小程序-数字累加效果,实现方式都在注释里面,有不足之处希望老司机多多指点微信小程序学习用:数字累加,动态效果
微信小程序学习用:数字累加,动态效果
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代码:

[JavaScript]
// pages/main/index.js import 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:" 完成了"             });         }     });  } })

3、NumberAnimate.js代码:

[JavaScript]
/**  * 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);//每次累加的值         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;  

项目地址及下载:
Github地址:https://github.com/demi520/wxapp-animateNumber
微信小程序学习用:数字累加,动态效果 wxapp-animateNumber.rar (23.39 KB, 下载次数: 116)

小鱼源码网www.51xyyx.com

轻松一刻:

有一天,某校校长打电话给某家长:先生,我有一个好消息,一个坏消息,都是关于您儿子的。家长:校长,先说坏消息吧!校长:坏消息是,您的儿子的动作十分女性化。家长:那好消息呢?校长:好消息是他现在是本校校花……
本文章内容归小鱼源码网所有,未经允许私自转载者必将追究责任
小鱼源码下载网,商业源码,专业客服,质量保证 » 微信小程序学习用:数字累加,动态效果

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

精品源码,商业服务,发布得积分,VIP免费下

开通会员 发布资源