Apprenez à utiliser le plug-in de défilement numérique du mini programme WeChat

Cet article présente principalement comment utiliser le plug-in de défilement numérique du mini-programme WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Écrit un mini plug-in de programme WeChat en utilisant la syntaxe es6 - défilement numérique

Rendu :

Mise en page wxml ; 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 appelle 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:" 完成了"
      });
    }
  });
 }})

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

Recommandations associées :

Utiliser jQuery pour implémenter des nombres tridimensionnels Exemple d'effet d'ajout de barre de défilement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!