如果你想要实现在规定时间内,数字由某个值变化到另一个值的动态滚动效果,那么 vue-count-to 插件可以完美的进行实现
一、使用npm 安装
npm install vue-count-to
二、在需要使用数字滚动的页面文件中引入 vue-count-to
// user.vue文件
<template>
<p>数字滚动面板区域: </p>
<countTo
ref="countTo"
:startVal="startVal"
:endVal="endVal"
:duration="duration"
:autoplay="autoplay"
:decimals="decimals"
:decimal="decimal"
:separator="separator"
:prefix="prefix"
:suffix="suffix"
:useEasing="useEasing"
></countTo>
<button @click="start">开始计数</button><br/>
<button @click="pause">暂停计数</button><br/>
<button @click="reset">重置数字面板</button><br/>
</template>
<script>
import countTo from 'vue-count-to'
export default{
components: {
countTo
},
data(){
return{
startVal: 0, // 开始值
endVal: 1000, // 结束值
duration: 3000, // 持续时间,毫秒
autoplay: false, // 是否自动播放
decimals: 0, // 要显示的小数位数
decimal: '.' , // 十进制分隔符
separator: ',' , // 分隔符
prefix: '' , // 前缀
suffix: '' , // 后缀
useEasing: true , // 使用缓和功能
}
},
methods: {
// 开始计数
start(){
this.$refs.countTo.start()
},
// 暂停计数
pause(){
this.$refs.countTo.pause()
},
// 重置数字
reset(){
this.$refs.countTo.reset() // 将数字面板中的数字重置为初始值 startVal
},
}
}
</script>