当前位置：首页 > VUE

vue如何实现数字滚动

2026-02-21 11:48:30VUE

Vue 实现数字滚动效果

数字滚动（Number Scroll 或 Count-Up）是一种常见的动画效果，通常用于展示统计数据、计数器等。以下是几种实现方式：

使用 CSS 动画

通过 CSS 的 transition 和 @keyframes 实现基础的数字滚动效果：

<template>
  <div class="counter">{{ animatedNumber }}</div>
</template>

<script>
export default {
  data() {
    return {
      targetNumber: 1000,
      currentNumber: 0,
      duration: 2000
    }
  },
  computed: {
    animatedNumber() {
      return Math.floor(this.currentNumber)
    }
  },
  mounted() {
    const increment = this.targetNumber / (this.duration / 16)
    const animate = () => {
      if (this.currentNumber < this.targetNumber) {
        this.currentNumber += increment
        requestAnimationFrame(animate)
      } else {
        this.currentNumber = this.targetNumber
      }
    }
    animate()
  }
}
</script>

<style>
.counter {
  transition: all 0.5s ease-out;
}
</style>

使用第三方库（vue-countup）

vue-countup 是专为 Vue 设计的数字滚动组件：

npm install vue-countup-v2

<template>
  <count-up
    :endVal="1000"
    :duration="2.5"
    :options="options"
  />
</template>

<script>
import CountUp from 'vue-countup-v2'

export default {
  components: { CountUp },
  data() {
    return {
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.'
      }
    }
  }
}
</script>

自定义指令实现

创建 Vue 指令实现更灵活的控制：

Vue.directive('countup', {
  bind(el, binding) {
    let start = 0
    const end = parseInt(binding.value)
    const duration = 2000
    const stepTime = Math.abs(Math.floor(duration / (end - start)))

    const timer = setInterval(() => {
      start += 1
      el.innerHTML = start
      if (start === end) clearInterval(timer)
    }, stepTime)
  }
})

<template>
  <div v-countup="1000"></div>
</template>

使用 GSAP 实现高级动画

GSAP 提供更强大的动画控制：

npm install gsap

<template>
  <div ref="counter">{{ number }}</div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      number: 0
    }
  },
  mounted() {
    gsap.to(this, {
      duration: 2,
      number: 1000,
      ease: "power1.out"
    })
  }
}
</script>