From d8b41fff43a2cee6a8f714ffa807623b15803786 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 20 Oct 2023 15:21:35 +0800 Subject: [PATCH] fix:立行立改Uniapp小程序新建项目 --- uni_modules/uview-ui/components/u-count-to/u-count-to.vue | 184 ++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 184 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-count-to/u-count-to.vue b/uni_modules/uview-ui/components/u-count-to/u-count-to.vue new file mode 100644 index 0000000..417b732 --- /dev/null +++ b/uni_modules/uview-ui/components/u-count-to/u-count-to.vue @@ -0,0 +1,184 @@ +<template> + <text + class="u-count-num" + :style="{ + fontSize: $u.addUnit(fontSize), + fontWeight: bold ? 'bold' : 'normal', + color: color + }" + >{{ displayValue }}</text> +</template> + +<script> + import props from './props.js'; +/** + * countTo ������������ + * @description ������������������������������������������������������������������������������������������������������ + * @tutorial https://www.uviewui.com/components/countTo.html + * @property {String | Number} startVal ���������������������������0������������������������������ 0 ��� + * @property {String | Number} endVal ��������������������������������� ��������� 0 ��� + * @property {String | Number} duration ���������������������������������������������������������������ms��� ��������� 2000 ��� + * @property {Boolean} autoplay ��������������������������������������� ��������� true ��� + * @property {String | Number} decimals ��������������������������������������������������� 0 ��� + * @property {Boolean} useEasing ��������������������������������������������������������������� true ��� + * @property {String} decimal ��������������� ��� ������ "." ��� + * @property {String} color ��������������� ������ '#606266' ) + * @property {String | Number} fontSize ���������������������px��� ������ 22 ��� + * @property {Boolean} bold ��������������������������� false ��� + * @property {String} separator ��������������������������������� + * @event {Function} end ��������������������������������� + * @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to> + */ +export default { + name: 'u-count-to', + data() { + return { + localStartVal: this.startVal, + displayValue: this.formatNumber(this.startVal), + printVal: null, + paused: false, // ������������ + localDuration: Number(this.duration), + startTime: null, // ��������������� + timestamp: null, // ��������� + remaining: null, // ��������������� + rAF: null, + lastTime: 0 // ������������������ + }; + }, + mixins: [uni.$u.mpMixin, uni.$u.mixin,props], + computed: { + countDown() { + return this.startVal > this.endVal; + } + }, + watch: { + startVal() { + this.autoplay && this.start(); + }, + endVal() { + this.autoplay && this.start(); + } + }, + mounted() { + this.autoplay && this.start(); + }, + methods: { + easingFn(t, b, c, d) { + return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b; + }, + requestAnimationFrame(callback) { + const currTime = new Date().getTime(); + // ���������setTimteout���������������������������60������������ + const timeToCall = Math.max(0, 16 - (currTime - this.lastTime)); + const id = setTimeout(() => { + callback(currTime + timeToCall); + }, timeToCall); + this.lastTime = currTime + timeToCall; + return id; + }, + cancelAnimationFrame(id) { + clearTimeout(id); + }, + // ������������������ + start() { + this.localStartVal = this.startVal; + this.startTime = null; + this.localDuration = this.duration; + this.paused = false; + this.rAF = this.requestAnimationFrame(this.count); + }, + // ��������������������������������������������������������������������� + reStart() { + if (this.paused) { + this.resume(); + this.paused = false; + } else { + this.stop(); + this.paused = true; + } + }, + // ������ + stop() { + this.cancelAnimationFrame(this.rAF); + }, + // ������������(������������������) + resume() { + if (!this.remaining) return + this.startTime = 0; + this.localDuration = this.remaining; + this.localStartVal = this.printVal; + this.requestAnimationFrame(this.count); + }, + // ������ + reset() { + this.startTime = null; + this.cancelAnimationFrame(this.rAF); + this.displayValue = this.formatNumber(this.startVal); + }, + count(timestamp) { + if (!this.startTime) this.startTime = timestamp; + this.timestamp = timestamp; + const progress = timestamp - this.startTime; + this.remaining = this.localDuration - progress; + if (this.useEasing) { + if (this.countDown) { + this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration); + } else { + this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration); + } + } else { + if (this.countDown) { + this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration); + } else { + this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration); + } + } + if (this.countDown) { + this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal; + } else { + this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal; + } + this.displayValue = this.formatNumber(this.printVal) || 0; + if (progress < this.localDuration) { + this.rAF = this.requestAnimationFrame(this.count); + } else { + this.$emit('end'); + } + }, + // ������������������ + isNumber(val) { + return !isNaN(parseFloat(val)); + }, + formatNumber(num) { + // ���num������Number������������������������������������������������������toFixed��������� + num = Number(num); + num = num.toFixed(Number(this.decimals)); + num += ''; + const x = num.split('.'); + let x1 = x[0]; + const x2 = x.length > 1 ? this.decimal + x[1] : ''; + const rgx = /(\d+)(\d{3})/; + if (this.separator && !this.isNumber(this.separator)) { + while (rgx.test(x1)) { + x1 = x1.replace(rgx, '$1' + this.separator + '$2'); + } + } + return x1 + x2; + }, + destroyed() { + this.cancelAnimationFrame(this.rAF); + } + } +}; +</script> + +<style lang="scss" scoped> +@import "../../libs/css/components.scss"; + +.u-count-num { + /* #ifndef APP-NVUE */ + display: inline-flex; + /* #endif */ + text-align: center; +} +</style> -- Gitblit v1.8.0