效果就是显示某个数值不是直接显示，而是从0开始滚动，直到为那个数值时停止滚动
1、新建数字滚动组件：test.vue文件
<template><div class="number-grow-warp"><span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span></div></template><script>export default {props: {time: {type: Number,default: 2},value: {type: Number,default: 720000}},methods: {numberGrow (ele) {let _this = thislet step = (_this.value * 10) / (_this.time * 1000)let current = 0let start = 0let t = setInterval(function () {start += stepif (start > _this.value) {clearInterval(t)start = _this.valuet = null}if (current === start) {return}current = startele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')}, 10)}},mounted () {this.numberGrow(this.$refs.numberGrow)}}</script><style>.number-grow-warp{transform: translateZ(0);}.number-grow {font-family: Arial-BoldMT;font-size: 64px;color: #ffaf00;letter-spacing: 2.67px;margin:110px 0 20px;display: block;line-height:64px;}</style>
2、页面使用
先引入组件
然后注册组件
export default {components: {NumberGrow}};
使用
<NumberGrow :value="720000"></NumberGrow>
