CountUp 数字滚动

数字从起始值滚动到目标值的动画效果,支持缓动

数字从起始值滚动到目标值的动画效果,支持缓动

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-count-up class="demo-count-up-basic" :endVal="1000" />
  <re-count-up class="demo-count-up-small" :endVal="100" />
  <re-count-up class="demo-count-up-large" :endVal="999999" />

<!-- 起始值 -->
  <re-count-up class="demo-count-up-start-0" :startVal="0" :endVal="500" />
  <re-count-up class="demo-count-up-start-100" :startVal="100" :endVal="500" />
  <re-count-up class="demo-count-up-start-500" :startVal="500" :endVal="500" />

<!-- 动画时长 -->
  <re-count-up class="demo-count-up-fast" :endVal="1000" :duration="500" />
  <re-count-up class="demo-count-up-normal" :endVal="1000" :duration="2000" />
  <re-count-up class="demo-count-up-slow" :endVal="1000" :duration="5000" />

<!-- 小数位 -->
  <re-count-up class="demo-count-up-decimal-0" :endVal="3.14159" :decimals="0" />
  <re-count-up class="demo-count-up-decimal-2" :endVal="3.14159" :decimals="2" />
  <re-count-up class="demo-count-up-decimal-4" :endVal="3.14159" :decimals="4" />

<!-- 大数字 -->
  <re-count-up class="demo-count-up-million" :endVal="1000000" />
  <re-count-up class="demo-count-up-billion" :endVal="9999999" />

<!-- 自定义样式 -->
  <re-count-up class="demo-count-up-custom-style" :endVal="1000" customStyle="font-size: 24px; color: #0052d9;" />

<!-- 零值 -->
  <re-count-up class="demo-count-up-zero" :endVal="0" />

<!-- 负数到正数 -->
  <re-count-up class="demo-count-up-negative" :startVal="-100" :endVal="100" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-count-up />。

API

CountUp Props

名称类型默认值描述必传
startValnumber0起始值N
endValnumber0目标值N
durationnumber2000动画时长(毫秒)N
decimalsnumber0小数位数N
prefixstring""前缀N
suffixstring""后缀N
useEasingbooleantrue是否使用缓动动画N
customStylestring""自定义样式N

CountUp Events

名称参数描述
end--

CountUp Slots

名称描述
--