用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    981

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-1-17 12:47:49 柿霖不是林 咫尺尊享 楼主 32345


    [HTML] 纯文本查看 复制代码
    <!--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>


    [JavaScript] 纯文本查看 复制代码
    // 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:" 完成了"
                });
            }
        });
     }
    })



    [JavaScript] 纯文本查看 复制代码
    /**
     * 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
    使用道具 举报 回复
    感谢分享
    使用道具 举报 回复
    2019-11-9 12:20:51 Xxiang 来自手机 新人求带
    板凳
    学习一下
    使用道具 举报 回复
    我有流量,你有产品,我们就可以合作,有意的个人开发者朋友可以联系微信号jim20180688,详聊
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略