查看: 387|回复: 0

微信小程序,数字滚动教程(含demo)

[复制链接]
发表于 2019-9-1 14:06:14 | 显示全部楼层 |阅读模式
随着微信小程序的出现,es6的追随者也越来越多了,我最近也在努力学习中,之前一直使用es5,感觉e6还是小众,没想到最近一直在研究小程序,也逛了好多论坛,发现微信小程序的好多demo都是大神们在用es6开发,顿时感觉全世界好像就我还在使用最基本的javascript语法;于是作为学习练手就用es6语法方式写了个小插件–数字滚动,不足之处还望老司机多多指点;

效果图:

微信小程序,数字滚动教程(含demo)

微信小程序,数字滚动教程(含demo)

wxml页面布局代码:

  1. <!--pages/main/index.wxml-->
  2. <view class="animate-number">
  3.     <view class="num num1">{{num1}}{{num1Complete}}</view>
  4.     <view class="num num2">{{num2}}{{num2Complete}}</view>
  5.     <view class="num num3">{{num3}}{{num3Complete}}</view>
  6.     <view class="btn-box">
  7.         <button bindtap="animate"  type="primary" class="button">click me</button>
  8.     </view>
  9. </view>
复制代码

index.js调用NumberAnimate.js

  1. // pages/main/index.js
  2. import NumberAnimate from "../../utils/NumberAnimate";
  3. Page({
  4.   data:{
  5.    
  6.   },
  7.   onLoad:function(options){
  8.     // 页面初始化 options为页面跳转所带来的参数
  9.    
  10.   },
  11.   onReady:function(){
  12.    
  13.   },
  14.   onShow:function(){
  15.    
  16.     // 页面显示
  17.   },
  18.   onHide:function(){
  19.     // 页面隐藏
  20.   },

  21.   onUnload:function(){
  22.     // 页面关闭

  23.   },
  24.   //调用NumberAnimate.js中NumberAnimate实例化对象,测试3种效果
  25. animate:function(){

  26.    this.setData({
  27.      num1:'',
  28.      num2:'',
  29.      num3:'',
  30.      num1Complete:'',
  31.      num2Complete:'',
  32.      num3Complete:''
  33.    });

  34.     let num1 = 18362.856;
  35.     let n1 = new NumberAnimate({
  36.         from:num1,//开始时的数字
  37.         speed:2000,// 总时间
  38.         refreshTime:100,//  刷新一次的时间
  39.         decimals:3,//小数点后的位数
  40.         onUpdate:()=>{//更新回调函数
  41.           this.setData({
  42.             num1:n1.tempValue
  43.           });
  44.         },
  45.         onComplete:()=>{//完成回调函数
  46.             this.setData({
  47.               num1Complete:" 完成了"
  48.             });
  49.         }
  50.     });

  51.     let num2 = 13388;
  52.     let n2 = new NumberAnimate({
  53.         from:num2,
  54.         speed:1500,
  55.         decimals:0,
  56.         refreshTime:100,
  57.         onUpdate:()=>{
  58.           this.setData({
  59.             num2:n2.tempValue
  60.           });
  61.         },
  62.         onComplete:()=>{
  63.             this.setData({
  64.               num2Complete:" 完成了"
  65.             });
  66.         }
  67.     });

  68.     let num3 = 2123655255888.86;
  69.     let n3 = new NumberAnimate({
  70.         from:num3,
  71.         speed:2000,
  72.         refreshTime:100,
  73.         decimals:2,
  74.         onUpdate:()=>{
  75.           this.setData({
  76.             num3:n3.tempValue
  77.           });
  78.         },
  79.         onComplete:()=>{
  80.             this.setData({
  81.               num3Complete:" 完成了"
  82.             });
  83.         }
  84.     });
  85. }
  86. })
复制代码

NumberAnimate.js代码:

  1. /**
  2. * Created by wangyy on 2016/12/26.
  3. */
  4. 'use strict';
  5. class NumberAnimate {

  6.     constructor(opt) {
  7.         let def = {
  8.             from:50,//开始时的数字
  9.             speed:2000,// 总时间
  10.             refreshTime:100,// 刷新一次的时间
  11.             decimals:2,// 小数点后的位数
  12.             onUpdate:function(){}, // 更新时回调函数
  13.             onComplete:function(){} // 完成时回调函数
  14.         }
  15.         this.tempValue = 0;//累加变量值
  16.         this.opt = Object.assign(def,opt);//assign传入配置参数
  17.         this.loopCount = 0;//循环次数计数
  18.         this.loops = Math.ceil(this.opt.speed/this.opt.refreshTime);//数字累加次数
  19.         this.increment = (this.opt.from/this.loops);//每次累加的值
  20.         this.interval = null;//计时器对象
  21.         this.init();
  22.     }
  23.     init(){
  24.         this.interval = setInterval(()=>{this.updateTimer()},this.opt.refreshTime);
  25.     }

  26.     updateTimer(){
  27.         
  28.         this.loopCount++;
  29.         this.tempValue = this.formatFloat(this.tempValue,this.increment).toFixed(this.opt.decimals);
  30.         if(this.loopCount >= this.loops){
  31.             clearInterval(this.interval);
  32.             this.tempValue = this.opt.from;
  33.             this.opt.onComplete();
  34.         }
  35.         this.opt.onUpdate();
  36.     }
  37.     //解决0.1+0.2不等于0.3的小数累加精度问题
  38.     formatFloat(num1, num2) {
  39.         let baseNum, baseNum1, baseNum2;
  40.         try {
  41.             baseNum1 = num1.toString().split(".")[1].length;
  42.         } catch (e) {
  43.             baseNum1 = 0;
  44.         }
  45.         try {
  46.             baseNum2 = num2.toString().split(".")[1].length;
  47.         } catch (e) {
  48.             baseNum2 = 0;
  49.         }
  50.         baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
  51.         return (num1 * baseNum + num2 * baseNum) / baseNum;
  52.     };
  53. }
  54. export default  NumberAnimate;
复制代码
源码下载
游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表