当前位置：首页 > VUE

vue实现数字递增滚动

2026-01-21 19:10:18VUE

Vue 实现数字递增滚动效果

在 Vue 中实现数字递增滚动效果可以通过多种方式完成，以下提供两种常见方法：

使用定时器和计算属性

<template>
  <div>{{ animatedNumber }}</div>
</template>

<script>
export default {
  data() {
    return {
      targetNumber: 1000,
      currentNumber: 0,
      animationDuration: 2000,
      startTime: null
    }
  },
  computed: {
    animatedNumber() {
      return Math.floor(this.currentNumber)
    }
  },
  mounted() {
    this.animateNumber()
  },
  methods: {
    animateNumber(timestamp) {
      if (!this.startTime) this.startTime = timestamp
      const progress = Math.min((timestamp - this.startTime) / this.animationDuration, 1)
      this.currentNumber = progress * this.targetNumber
      if (progress < 1) {
        requestAnimationFrame(this.animateNumber)
      }
    }
  }
}
</script>

使用第三方库（如 vue-count-to）

安装 vue-count-to 库：

npm install vue-count-to --save

使用示例：

<template>
  <count-to :start-val="0" :end-val="1000" :duration="2000"></count-to>
</template>

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

自定义过渡效果

可以通过 CSS 过渡增强视觉效果：

.number-transition {
  transition: all 0.5s ease-out;
}

结合 Vue 的 transition 组件：

vue实现数字递增滚动

<transition name="number-transition">
  <div :key="animatedNumber">{{ animatedNumber }}</div>
</transition>

注意事项

性能优化：对于大量数字动画，考虑使用 requestAnimationFrame
格式化：可使用 toLocaleString() 方法添加千位分隔符
中断处理：组件销毁时应清除动画帧请求

以上方法可根据具体需求选择，第三方库方案更简单快捷，自定义实现则更灵活可控。

标签: 数字 vue

分享给朋友：

vue 实现多选

Vue 实现多选的方法在 Vue 中实现多选功能可以通过多种方式完成，以下是几种常见的实现方法：使用 v-model 绑定数组 Vue 的 v-model 指令可以与复选框结合使用，绑定到一个数…

vue 实现手册

以下是关于 Vue.js 实现手册的整理内容，涵盖核心概念、实践方法和常见场景的解决方案：核心概念与基础用法 Vue.js 是一个渐进式 JavaScript 框架，核心特点包括数据驱动视图和组件…

vue实现a

Vue 实现 A 功能的方法在 Vue 中实现 A 功能可以通过多种方式，具体取决于 A 功能的具体需求。以下是几种常见的实现方法：使用 Vue 组件通过创建自定义组件来实现 A 功能。组件可…

vue 实现菜单

Vue 实现菜单的方法使用 Vue 实现菜单可以通过多种方式，以下是几种常见的方法：使用 Vue Router 实现动态路由菜单通过 Vue Router 可以动态生成菜单，根据路由配置自动渲…

vue 实现单选

使用 v-model 绑定单选值在 Vue 中，可以通过 v-model 绑定单选按钮的值。定义一个响应式数据（如 selectedOption），并将其与单选按钮的 value 属性关联。…

vue实现计算

Vue 实现计算的方法在 Vue 中实现计算功能可以通过多种方式完成，主要包括计算属性（computed）、方法（methods）和侦听器（watch）。以下是具体的实现方法：计算属性（Comp…

vue实现数字递增滚动