数字滚动实现

介绍

vue-countup-v3 插件是一个基于 Vue3 的数字动画插件，用于在网站或应用程序中创建带有数字动画效果的计数器。通过该插件，我们可以轻松地实现数字的递增或递减动画，并自定义其样式和动画效果。该插件可以用于许多场景，例如展示网站页面的访问量，展示应用程序的下载量，以及展示任何需要动态展示数字的场景等。

安装命令

npm i vue-countup-v3

代码实现

简便版

<script setup lang="ts">
import CountUp from 'vue-countup-v3'
</script><template><count-up :end-val="3000"></count-up>
</template>

豪华版-单个

<template><div class="body"><div class="box"><count-up :end-val="endVal" :duration="duration":decimal-places="decimals" :options="options" @init="onInit" @finished="onFinished"class="count"></count-up></div></div>
</template><script setup lang="ts">
import { reactive, toRefs, onMounted,ref } from 'vue'
import CountUp from 'vue-countup-v3'
import type { ICountUp, CountUpOptions } from 'vue-countup-v3'import zhuxing from '@/components/gundong/zhuxing.vue'const data = reactive({startVal: 0, // 开始值endVal: 10000, // 结束值 -- 可以写成动态的duration: 5, // 跳动时长 - 单位：秒decimals: 0, // 小数点位数countUp: undefined as ICountUp | undefined, // 跳动的对象options: {// 配置分隔符separator: '❤️'} as CountUpOptions
})const onInit = (ctx: ICountUp) => {data.countUp = ctxconsole.log(`开始`, ctx)
}
const onFinished = () => {console.log('结束')
}
const { endVal, duration, decimals, options } = toRefs(data)onMounted(() => {// onInit()// onFinished()
})
</script><style lang="less" scoped>
.body {.box {display: flex;justify-content: flex-start;.count {font-size: 20px;font-weight: bold;margin: 0 30px;}}
}
</style>

豪华版-多个

<template><div class="body"><div class="box"><count-up v-for="(val, index) in endVal" :key="index" :end-val="val" :duration="duration":decimal-places="decimals" :options="options" @init="onInit" @finished="onFinished"class="count"></count-up></div></div>
</template><script setup lang="ts">
import { reactive, toRefs, onMounted,ref } from 'vue'
import CountUp from 'vue-countup-v3'
import type { ICountUp, CountUpOptions } from 'vue-countup-v3'const data = reactive({startVal: 0, // 开始值endVal: [3000, 5000, 10000], // 结束值 -- 可以写成动态的duration: 3, // 跳动时长 - 单位：秒decimals: 0, // 小数点位数countUps: [] as Array<ICountUp> | [], // 跳动的对象数组options: {// 配置分隔符separator: '❤️'} as CountUpOptions
})const onInit = (ctx: ICountUp) => {data.countUp = ctxconsole.log(`开始`, ctx)
}
const onFinished = () => {console.log('结束')
}
const { endVal, duration, decimals, options } = toRefs(data)onMounted(() => {// onInit()// onFinished()
})
</script><style lang="less" scoped>
.body {.box {display: flex;justify-content: flex-start;.count {font-size: 20px;font-weight: bold;margin: 0 30px;}}
}
</style>

效果展示