vue实现数字滚动效果
代码如下(示例):
数字滚动组件num.vue
<template>
<div
ref="numberRoll"
:data-time="time"
class="number-roll"
:data-value="num"
></div>
</template>
<script>
export default {
name: "Num",
props: {
num: {
type: Number,
default: 720000,
},
time: {
type: Number,
default: 0.5,
},
},
data() {
return {
data: null,
};
},
mounted() {
this.numberRoll(this.$refs.numberRoll);
},
methods: {
numberRoll(ele) {
let _this = this;
let step = (_this.num * 10) / (_this.time * 1000);
let current = 0;
let start = 0;
let t = setInterval(function () {
start += step;
if (start > _this.num) {
clearInterval(t);
start = _this.num;
t = null;
}
if (current === start) {
return;
}
current = start;
ele.innerHTML = current
.toFixed(0)
.toString()
.replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");
}, 10);
},
},
};
</script>
<style lang="scss" scoped>
// 数字样式自定义
</style>