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

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

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

效果图：

wxml页面布局代码：

 !--pages/main/index.wxml-- 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: #39; #39;,
 num2: #39; #39;,
 num3: #39; #39;,
 num1Complete: #39; #39;,
 num2Complete: #39; #39;,
 num3Complete: #39; #39;
 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.
 */ #39;use strict #39;;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;
相关推荐：

使用jQuery实现立体式数字滚动条增加效果实例
以上就是教大家如何使用微信小程序数字滚动插件的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！