Nuxt.js 数字滚动效果实现教程 - vue-countup 插件

在 Nuxt.js 中，可以使用第三方插件 'vue-countup' 来实现平滑的数字滚动效果。

步骤如下：

1. 安装 'vue-countup' 插件：

npm install vue-countup

2. 在 'nuxt.config.js' 中添加插件配置：

plugins: [
  { src: '~/plugins/vue-countup', ssr: false }
]

3. 在 'plugins' 文件夹下新建 'vue-countup.js' 文件：

import Vue from 'vue'
import VueCountUp from 'vue-countup'

Vue.component('VueCountUp', VueCountUp)

4. 在需要使用数字滚动效果的组件中，使用 'VueCountUp' 组件，例如：

<template>
  <div>
    <VueCountUp :startVal='0' :endVal='1000' :duration='2' />
  </div>
</template>

其中，'startVal' 为起始值，'endVal' 为终止值，'duration' 为滚动时长（单位为秒）。

5. 可以在 'VueCountUp' 组件中添加其他属性进行自定义配置，例如：

<template>
  <div>
    <VueCountUp :startVal='0' :endVal='1000' :duration='2' :separator='',' :decimal='2' :prefix='$' />
  </div>
</template>

在上述例子中，'separator' 为千位分隔符，'decimal' 为小数位数，'prefix' 为数字前缀。

参考文档：https://github.com/xlsdg/vue-countup