当前位置：首页 > VUE

vue实现数字滚动

2026-01-19 13:17:51VUE

Vue 实现数字滚动效果

数字滚动效果常用于展示统计数据、计数器等场景。以下是几种常见的实现方法：

使用 transition 和 v-for

通过 Vue 的过渡效果和列表渲染实现数字滚动：

<template>
  <div>
    <transition-group name="count-up" tag="div" class="counter">
      <span v-for="digit in displayDigits" :key="digit.id" class="digit">
        {{ digit.value }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      targetNumber: 12345,
      displayDigits: []
    }
  },
  mounted() {
    this.animateNumber(0, this.targetNumber, 2000)
  },
  methods: {
    animateNumber(start, end, duration) {
      const startTime = performance.now()
      const updateNumber = (currentTime) => {
        const elapsedTime = currentTime - startTime
        const progress = Math.min(elapsedTime / duration, 1)
        const currentValue = Math.floor(start + (end - start) * progress)

        this.displayDigits = String(currentValue).split('').map((d, i) => ({
          id: i,
          value: d
        }))

        if (progress < 1) {
          requestAnimationFrame(updateNumber)
        }
      }
      requestAnimationFrame(updateNumber)
    }
  }
}
</script>

<style>
.count-up-enter-active, .count-up-leave-active {
  transition: all 0.5s;
}
.count-up-enter, .count-up-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
.digit {
  display: inline-block;
  margin: 0 2px;
}
</style>

使用第三方库

vue-countup 是一个专门实现数字滚动效果的库：

vue实现数字滚动

安装：

npm install vue-countup-v2

使用示例：

vue实现数字滚动

<template>
  <count-up
    :start-val="0"
    :end-val="targetNumber"
    :duration="2.5"
    :options="options"
  />
</template>

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

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

纯 CSS 动画方案

结合 CSS 动画实现简单数字滚动：

<template>
  <div class="number-scroll">
    <div
      v-for="(digit, index) in digits"
      :key="index"
      class="digit-container"
      :style="{ height: `${digitHeight}px` }"
    >
      <div
        class="digit-scroll"
        :style="{ transform: `translateY(-${digit * digitHeight}px)` }"
      >
        <span v-for="n in 10" :key="n">{{ n % 10 }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      digitHeight: 30
    }
  },
  computed: {
    digits() {
      return String(this.value).split('').map(Number)
    }
  }
}
</script>

<style>
.number-scroll {
  display: flex;
  overflow: hidden;
}
.digit-container {
  position: relative;
  overflow: hidden;
}
.digit-scroll {
  transition: transform 1s ease-out;
}
.digit-scroll span {
  display: block;
  height: 30px;
  line-height: 30px;
}
</style>