Detailed instructions on the use of the WeChat mini-program digital rolling plug-in, and detailed instructions on the use of mini-Programs

Detailed instructions on the use of the mini-program digital scroll plug-in

Es6 syntax is used to write a small program plug-in-number scrolling;

:

Wxml page layout code:

<!--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 calls NumberAnimate. js

// Pages/main/index. jsimport NumberAnimate from ".. /.. /utils/NumberAnimate "; Page ({data :{}, onLoad: function (options) {// parameters brought about by Page initialization options for Page Jump}, onReady: function () {}, onShow: function () {// page display}, onHide: function () {// page hidden}, onUnload: function () {// page closed }, // call NumberAnimate. in js, NumberAnimate instantiate the object and test three effects: function () {this. setData ({num1: '', num2:'', num3: '', num1Complete:'', num2Complete: '', num3Complete:''}); let num1 = 18362.856; let n1 = new NumberAnimate ({from: num1, // number at the start speed: 2000, // total time refreshTime: 100, // refresh time decimals: 3, // The number of digits after the decimal point onUpdate :() =>{// update the callback function this. setData ({num1: n1.tempValue}) ;}, onComplete :() =>{// complete the callback function this. setData ({num1Complete: "finished"}) ;}}); 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: "finished"}) ;}}); 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: "finished "});}});}})

NumberAnimate. js code:

/*** Created by wangyy on 2016/12/26. */'use strict '; class NumberAnimate {constructor (opt) {let def = {from: 50, // The number speed: 2000 at the start, // The total refreshTime: 100, // refresh time decimals: 2, // number of digits after the decimal point onUpdate: function () {}, // callback function onComplete: function () {} // callback function upon completion} this. tempValue = 0; // accumulate variable value this. opt = Object. assign (def, opt); // assign input configuration parameter this. loopCount = 0; // number of cycles count this. loops = Math. ceil (this. opt. speed/this. opt. refreshTime); // Number of accumulated times this. increment = (this. opt. from/this. loops); // the value of this. interval = null; // timer object 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 () ;}// solve the problem of 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;

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.