使用 react-countup 组件实现数值滚动特效

Last updated at Sun Jan 07 2024•1 min read

实现效果

npm install react-countup

最基础的使用，只需要引入组件，并且指定一个滚动停止的数值即可。

import CountUp from 'react-countup';
 
<CountUp end={100} />

在一些情况下，可能数值并非在首屏幕可见范围，这个时候就需要指定组件滚动到可视范围时才开始滚动效果。react-countup 组件也提供了这个功能，只需要指定 enableScrollSpy 即可

<CountUp 
  end={100} 
  enableScrollSpy // 当组件可见时才开始滚动
  scrollSpyOnce // 只展示一次滚动效果
/>