使用小程序數(shù)字滾動(dòng)插件的方法

這篇文章主要介紹了使用小程序數(shù)字滾動(dòng)插件的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

用es6語(yǔ)法方式寫了個(gè)微信小程序小插件–數(shù)字滾動(dòng)；

效果圖：

wxml頁(yè)面布局代碼：

<!--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調(diào)用NumberAnimate.js

// pages/main/index.jsimport NumberAnimate from "../../utils/NumberAnimate";Page({
 data:{ 
 },
 onLoad:function(options){
  // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù) 
 },
 onReady:function(){ 
 },
 onShow:function(){
 
  // 頁(yè)面顯示
 },
 onHide:function(){
  // 頁(yè)面隱藏
 }, 
 onUnload:function(){
  // 頁(yè)面關(guān)閉 
 },
 //調(diào)用NumberAnimate.js中NumberAnimate實(shí)例化對(duì)象，測(cè)試3種效果
 animate:function(){
 
  this.setData({
   num1:'',
   num2:'',
   num3:'',
   num1Complete:'',
   num2Complete:'',
   num3Complete:''
  });
 
  let num1 = 18362.856;
  let n1 = new NumberAnimate({
    from:num1,//開(kāi)始時(shí)的數(shù)字
    speed:2000,// 總時(shí)間
    refreshTime:100,// 刷新一次的時(shí)間
    decimals:3,//小數(shù)點(diǎn)后的位數(shù)
    onUpdate:()=>{//更新回調(diào)函數(shù)
     this.setData({
      num1:n1.tempValue     });
    },
    onComplete:()=>{//完成回調(diào)函數(shù)
      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,//開(kāi)始時(shí)的數(shù)字
      speed:2000,// 總時(shí)間
      refreshTime:100,// 刷新一次的時(shí)間
      decimals:2,// 小數(shù)點(diǎn)后的位數(shù)
      onUpdate:function(){}, // 更新時(shí)回調(diào)函數(shù)
      onComplete:function(){} // 完成時(shí)回調(diào)函數(shù)
    }
    this.tempValue = 0;//累加變量值
    this.opt = Object.assign(def,opt);//assign傳入配置參數(shù)
    this.loopCount = 0;//循環(huán)次數(shù)計(jì)數(shù)
    this.loops = Math.ceil(this.opt.speed/this.opt.refreshTime);//數(shù)字累加次數(shù)
    this.increment = (this.opt.from/this.loops);//每次累加的值
    this.interval = null;//計(jì)時(shí)器對(duì)象
    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的小數(shù)累加精度問(wèn)題
  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;

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享使用小程序數(shù)字滾動(dòng)插件的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!