如何在页面上实现数字从初始值滚动到最终值?
这就需要在vue项目中引入vue-countTo,这是一个无依赖,轻量级的vue组件。
安装引入方式:
npm install vue-count-to //安装引入
使用:
<template>
<countTo :startVal="a" :endVal="b" :duration="3000"></countTo>
</template>
<script>
import countTo from "vue-count-to"; //引入
export default {
name: "",
components: {
countTo
}
data(){
return{
a:0,
b:2020
}
}
}
</script>
其中startVal绑定的是初始值,endVal绑定的是最终值。duration是过程时间,以毫秒为单位。
即a是初始值,b是最终值。