위 챗 애플 릿 디지털 스크롤 플러그 인 사용 설명
효과 그림:
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 에서 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:" "
});
}
});
}})
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;
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.