Home > Web Front-end > JS Tutorial > How to use digital scrolling plug-in in WeChat mini program

How to use digital scrolling plug-in in WeChat mini program

亚连
Release: 2018-06-08 11:25:12
Original
2387 people have browsed it

This article mainly introduces how to use the digital scrolling plug-in of the WeChat applet. It has a certain reference value. Interested friends can refer to it.

Write a WeChat applet using es6 syntax. Small plug-in – digital scrolling;

Rendering:

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>
Copy after login

index.js calls 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:&#39;&#39;,
   num2:&#39;&#39;,
   num3:&#39;&#39;,
   num1Complete:&#39;&#39;,
   num2Complete:&#39;&#39;,
   num3Complete:&#39;&#39;
  });
 
  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:" 完成了"
      });
    }
  });
 }})
Copy after login

NumberAnimate.js code:

/**
 * Created by wangyy on 2016/12/26.
 */&#39;use strict&#39;;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;
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement click-to-load loading of five-level regions across the country in the zTree tree plug-in

How to use ECharts in webpack ?

Basic Internal Method Diagram of Object in JavaScript (Graphic Tutorial)

The above is the detailed content of How to use digital scrolling plug-in in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template