vue实现数字递增滚动

Vue 实现数字递增滚动效果

使用 Vue 实现数字递增滚动效果可以通过多种方式实现，以下是几种常见的方法：

使用 transition 和计算属性

通过 Vue 的过渡效果和计算属性结合，可以实现平滑的数字递增效果。

<template>
  <div>
    <transition name="slide-up" mode="out-in">
      <span :key="currentNumber">{{ currentNumber }}</span>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      targetNumber: 100,
      currentNumber: 0
    }
  },
  mounted() {
    this.animateNumber()
  },
  methods: {
    animateNumber() {
      const duration = 2000 // 动画持续时间
      const startTime = performance.now()

      const updateNumber = (timestamp) => {
        const elapsed = timestamp - startTime
        const progress = Math.min(elapsed / duration, 1)
        this.currentNumber = Math.floor(progress * this.targetNumber)

        if (progress < 1) {
          requestAnimationFrame(updateNumber)
        }
      }

      requestAnimationFrame(updateNumber)
    }
  }
}
</script>

<style>
.slide-up-enter-active, .slide-up-leave-active {
  transition: all 0.5s ease;
}
.slide-up-enter, .slide-up-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>

使用第三方库

Vue-count-to 是一个专门用于数字动画的 Vue 组件，使用简单且功能强大。

安装：

npm install vue-count-to

使用示例：

<template>
  <div>
    <countTo :startVal="0" :endVal="1000" :duration="3000"></countTo>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
export default {
  components: { countTo }
}
</script>

自定义指令实现

创建一个 Vue 指令来实现数字滚动效果。

Vue.directive('count-up', {
  bind(el, binding) {
    let start = 0
    const end = parseInt(binding.value)
    const duration = 2000
    const increment = end / (duration / 16)

    const timer = setInterval(() => {
      start += increment
      if (start >= end) {
        clearInterval(timer)
        start = end
      }
      el.innerHTML = Math.floor(start)
    }, 16)
  }
})

使用方式：

<div v-count-up="1000"></div>

使用 GSAP 动画库

GSAP 提供了强大的动画功能，可以实现更复杂的数字滚动效果。

安装：

npm install gsap

使用示例：

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

<script>
import { gsap } from 'gsap'
export default {
  data() {
    return {
      currentNumber: 0
    }
  },
  mounted() {
    gsap.to(this, {
      duration: 2,
      currentNumber: 1000,
      onUpdate: () => {
        this.currentNumber = Math.floor(this.currentNumber)
      }
    })
  }
}
</script>

以上方法都可以实现数字递增滚动效果，根据项目需求选择最适合的方案。对于简单需求，自定义指令或 transition 足够；复杂动画建议使用 GSAP 或 vue-count-to 这类专门库。