以微信小程序數(shù)字滾動開發(fā)來談插件制作

2017年6月13日，微信小程序數(shù)字滾動已經(jīng)是當(dāng)下最熱門的話題，下面將從多方面來談?wù)勎⑿判〕绦驍?shù)字滾動插件開發(fā)以及微信小程序數(shù)字相關(guān)設(shè)置相關(guān)的內(nèi)容。

　　2017年6月13日微店發(fā)布最新公告，決定調(diào)整補貼策略：借記卡支付仍然免費、提現(xiàn)仍然免費，對使用信用卡支付的交易收取1%的手續(xù)費。微店方面表示，此舉是為了防范信用卡惡意套現(xiàn)，新規(guī)將從2017年6月16日起實行。值得注意的是，這筆手續(xù)費由賣家承擔(dān)。

　　2017年6月13日在618大促即將開啟之際，天貓于今天宣布“天貓出海”項目正式推出。天貓方面表示，“天貓出海”是以天貓作為主引擎，利用阿里巴巴核心電商板塊20億商品，將天貓生態(tài)模式逐步成功復(fù)制并落地到東南亞、印度以及全球市場，提高當(dāng)?shù)仉娚绦?，服?wù)海外消費者。

用es6語法方式寫了個微信小程序小插件–數(shù)字滾動；

效果圖：

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

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

想了解更多微信小程序開發(fā)和微信小程序大全都可以進入微信小程序商城系統(tǒng)開發(fā)了解。