u-count-to.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <text
  3. class="u-count-num"
  4. :style="{
  5. fontSize: $u.addUnit(fontSize),
  6. fontWeight: bold ? 'bold' : 'normal',
  7. color: color
  8. }"
  9. >{{ displayValue }}</text>
  10. </template>
  11. <script>
  12. import props from './props.js';
  13. /**
  14. * countTo 数字滚动
  15. * @description 该组件一般用于需要滚动数字到某一个值的场景,目标要求是一个递增的值。
  16. * @tutorial https://www.uviewui.com/components/countTo.html
  17. * @property {String | Number} startVal 开始的数值,默认从0增长到某一个数(默认 0 )
  18. * @property {String | Number} endVal 要滚动的目标数值,必须 (默认 0 )
  19. * @property {String | Number} duration 滚动到目标数值的动画持续时间,单位为毫秒(ms) (默认 2000 )
  20. * @property {Boolean} autoplay 设置数值后是否自动开始滚动 (默认 true )
  21. * @property {String | Number} decimals 要显示的小数位数,见官网说明(默认 0 )
  22. * @property {Boolean} useEasing 滚动结束时,是否缓动结尾,见官网说明(默认 true )
  23. * @property {String} decimal 十进制分割 ( 默认 "." )
  24. * @property {String} color 字体颜色( 默认 '#606266' )
  25. * @property {String | Number} fontSize 字体大小,单位px( 默认 22 )
  26. * @property {Boolean} bold 字体是否加粗(默认 false )
  27. * @property {String} separator 千位分隔符,见官网说明
  28. * @event {Function} end 数值滚动到目标值时触发
  29. * @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
  30. */
  31. export default {
  32. name: 'u-count-to',
  33. data() {
  34. return {
  35. localStartVal: this.startVal,
  36. displayValue: this.formatNumber(this.startVal),
  37. printVal: null,
  38. paused: false, // 是否暂停
  39. localDuration: Number(this.duration),
  40. startTime: null, // 开始的时间
  41. timestamp: null, // 时间戳
  42. remaining: null, // 停留的时间
  43. rAF: null,
  44. lastTime: 0 // 上一次的时间
  45. };
  46. },
  47. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  48. computed: {
  49. countDown() {
  50. return this.startVal > this.endVal;
  51. }
  52. },
  53. watch: {
  54. startVal() {
  55. this.autoplay && this.start();
  56. },
  57. endVal() {
  58. this.autoplay && this.start();
  59. }
  60. },
  61. mounted() {
  62. this.autoplay && this.start();
  63. },
  64. methods: {
  65. easingFn(t, b, c, d) {
  66. return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
  67. },
  68. requestAnimationFrame(callback) {
  69. const currTime = new Date().getTime();
  70. // 为了使setTimteout的尽可能的接近每秒60帧的效果
  71. const timeToCall = Math.max(0, 16 - (currTime - this.lastTime));
  72. const id = setTimeout(() => {
  73. callback(currTime + timeToCall);
  74. }, timeToCall);
  75. this.lastTime = currTime + timeToCall;
  76. return id;
  77. },
  78. cancelAnimationFrame(id) {
  79. clearTimeout(id);
  80. },
  81. // 开始滚动数字
  82. start() {
  83. this.localStartVal = this.startVal;
  84. this.startTime = null;
  85. this.localDuration = this.duration;
  86. this.paused = false;
  87. this.rAF = this.requestAnimationFrame(this.count);
  88. },
  89. // 暂定状态,重新再开始滚动;或者滚动状态下,暂停
  90. reStart() {
  91. if (this.paused) {
  92. this.resume();
  93. this.paused = false;
  94. } else {
  95. this.stop();
  96. this.paused = true;
  97. }
  98. },
  99. // 暂停
  100. stop() {
  101. this.cancelAnimationFrame(this.rAF);
  102. },
  103. // 重新开始(暂停的情况下)
  104. resume() {
  105. if (!this.remaining) return
  106. this.startTime = 0;
  107. this.localDuration = this.remaining;
  108. this.localStartVal = this.printVal;
  109. this.requestAnimationFrame(this.count);
  110. },
  111. // 重置
  112. reset() {
  113. this.startTime = null;
  114. this.cancelAnimationFrame(this.rAF);
  115. this.displayValue = this.formatNumber(this.startVal);
  116. },
  117. count(timestamp) {
  118. if (!this.startTime) this.startTime = timestamp;
  119. this.timestamp = timestamp;
  120. const progress = timestamp - this.startTime;
  121. this.remaining = this.localDuration - progress;
  122. if (this.useEasing) {
  123. if (this.countDown) {
  124. this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);
  125. } else {
  126. this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
  127. }
  128. } else {
  129. if (this.countDown) {
  130. this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);
  131. } else {
  132. this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
  133. }
  134. }
  135. if (this.countDown) {
  136. this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
  137. } else {
  138. this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
  139. }
  140. this.displayValue = this.formatNumber(this.printVal) || 0;
  141. if (progress < this.localDuration) {
  142. this.rAF = this.requestAnimationFrame(this.count);
  143. } else {
  144. this.$emit('end');
  145. }
  146. },
  147. // 判断是否数字
  148. isNumber(val) {
  149. return !isNaN(parseFloat(val));
  150. },
  151. formatNumber(num) {
  152. // 将num转为Number类型,因为其值可能为字符串数值,调用toFixed会报错
  153. num = Number(num);
  154. num = num.toFixed(Number(this.decimals));
  155. num += '';
  156. const x = num.split('.');
  157. let x1 = x[0];
  158. const x2 = x.length > 1 ? this.decimal + x[1] : '';
  159. const rgx = /(\d+)(\d{3})/;
  160. if (this.separator && !this.isNumber(this.separator)) {
  161. while (rgx.test(x1)) {
  162. x1 = x1.replace(rgx, '$1' + this.separator + '$2');
  163. }
  164. }
  165. return x1 + x2;
  166. },
  167. destroyed() {
  168. this.cancelAnimationFrame(this.rAF);
  169. }
  170. }
  171. };
  172. </script>
  173. <style lang="scss" scoped>
  174. @import "../../libs/css/components.scss";
  175. .u-count-num {
  176. /* #ifndef APP-NVUE */
  177. display: inline-flex;
  178. /* #endif */
  179. text-align: center;
  180. }
  181. </style>