当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序数字滚动插件使用详解

微信小程序数字滚动插件使用详解

2018年02月06日  | 移动技术网IT编程  | 我要评论

用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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网