教大家如何使用微信小程序数字滚动插件-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

教大家如何使用微信小程序数字滚动插件

本文主要和大家介绍微信小程序数字滚动插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

用es6语法方式写了个微信小程序小插件–数字滚动；

效果图：

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>

登录后复制

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;

登录后复制

相关推荐