vue中实现数字滚动效果

安装vue-count-to

npm install vue-count-to

引入 vue-count-to

<template>
  <div>
    <count-to :start-val="startVal" :end-val="endVal" :duration="duration" :decimals="decimals" :separator="separator" :prefix="prefix" :suffix="suffix" />
  </div>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  data() {
    return {
      startVal: 0,
      endVal: 2021,
      duration: 2000, // 动画持续时间，单位为毫秒
      decimals: 0, // 小数点后保留位数
      separator: ',', // 分隔符
      prefix: '$', // 前缀
      suffix: '元' // 后缀
    }
  }
}
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>

配置项

vue-count-to 提供了多个属性来配置数字滚动动画的效果：

start-val：初始值，默认为 0。
end-val：目标值。
duration：动画持续时间，单位为毫秒。
decimals：小数点后保留位数，默认为 0。
separator：千位分隔符，默认为逗号 ,。
prefix：前缀，默认为空字符串。
suffix：后缀，默认为空字符串。
use-easing：是否使用缓动效果，默认为 true。
easing-function：缓动函数，默认为 easeOutExpo。

动态更新数值

如果你需要在运行时动态更新数值，可以通过修改 endVal 来实现。