前言
因需要一个将数字动态增加到指定值的小组件，于是在网上搜索，不出所料没有一个实用的答案。全是无脑复制粘贴，所以自己做了这样一个小组件。这个小组可以让单调的数字表现出动画效果，能使得页面显得更有活力。
实现思路
就是使用一个计时器重复叠加直到大于等于目的数值，然后设置数字为目标数字即可；
再一个就是增加滚动监听，当页面看得到计数器时再启动计数。
组件代码
<template>
<span ref="count">{{num}}</span>
</template>
<script>
export default {
data(){
return {
num: 0,
counted: false,
gap: 50
}
},
computed: {
ts(){
return Math.floor(this.duration / this.gap)
},
add(){
return Math.floor(this.data / this.ts)
}
},
props: {
data: Number,
duration: {
type: Number,
default: 1500
}
},
methods: {
count(){
this.num = this.num + this.add;
if(this.num >= this.data)
return this.num = this.data
setTimeout(() => this.count(), this.ts)
},
isSee(){
if(this.counted)
return;
let st = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
let ch = document.documentElement.clientHeight;
let ot = this.$refs.count.offsetTop;
if(ot > st && ot < st + (ch * .88)){
this.removeListen();
this.counted = true;
this.count();
}
},
removeListen(){
window.removeEventListener('scroll', this.isSee);
}
},
beforeDestroy(){
this.removeListen();
},
mounted(){
window.addEventListener('scroll', this.isSee);
this.isSee();
}
}
</script>
引用示例
//假设组件在当前目录，文件名为Count.vue
//js
import Count from './Count'
export default {
components: {
Count
}
}
//template 可配置duration，功能尚未完善，有需要可自行调整
<Count :data="125"/>
