微信小程序数字滚动插件使用详解
用es6语法方式写了个微信小程序小插件–数字滚动;
成都创新互联公司是一家集网站建设,奎屯企业网站建设,奎屯品牌网站建设,网站定制,奎屯网站建设报价,网络营销,网络优化,奎屯网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
效果图:
wxml页面布局代码:
{{num1}}{{num1Complete}} {{num2}}{{num2Complete}} {{num3}}{{num3Complete}}
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);//每次累加的值 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;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
当前标题:微信小程序数字滚动插件使用详解
本文URL:http://cdiso.cn/article/psshje.html