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

亚连
Release: 2018-06-08 11:25:12
Original
2253 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:

 {{num1}}{{num1Complete}} {{num2}}{{num2Complete}} {{num3}}{{num3Complete}}   
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:'', 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:" 完成了" }); } }); }})
Copy after login

NumberAnimate.js code:

/** * 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;
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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!