欢迎光临,了解微信小程序开发,就上易用通!

当前位置 : 易用通 > 小程序模板
数字累加,动态效果数字累加,动态效果
立即下载

数字累加,动态效果

模板分类 : 小程序模板 模板编号 : Y955 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-03-16 11:24 模板等级 : ☆☆☆☆☆

模板截图:

微信小程序-数字累加效果,实现方式都在注释里面,有不足之处希望老司机多多指点数字累加,动态效果(图1) 数字累加,动态效果(图2)  1、wxml代码
[HTML] 纯文本查看 复制代码
?
1
2
3
4
5
6
7
8
9
<!--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] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
// 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] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/**
 * 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;

加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。