countUp.js在react中的应用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yichensheng/article/details/79425275

公司项目需要做一个数字显示器,让我找到一个有趣的项目——CountUp.js。它是一个免费的轻量级javaScript工具,可用于快速创建动画,以更有趣的方式显示数字数据。作用:动画显示数字,千位分隔符,添加前后缀等等。

demo在查看CountUp.js工具demo

github在countUp的GitHub
已经有四千多的Star了,但是只有两条issues,这说明什么,几乎所有人都可以迅速上手得到自己想要的结果而没什么bug出现,只能说一句,强!

首先,它支持了Angular,React,Vue三大框架和WordPress,基本写前端的都能用了有木有,由于我们用的是react,所以就打开React的部分看看。

安装

使用npm或yarn均可

yarn add react-countup

npm install react-countup --save

使用

我们看demo页的例子是最直观的

这里写图片描述

先做一个最简单的例子:

import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';

render(
  <CountUp start={0} end={160526} />,
  document.getElementById('root')
);

上述代码设置了从0开始到160526的数字变化。

把所有的属性都拖出来瞧瞧:

  • start: number

开始值

  • end: number

结束值

  • duration: number

动画完成用时,以秒为单位

  • decimals: number

小数位数

  • useEasing: boolean

设置宽松,一般情况是true

  • useGrouping: boolean

设置分组功能,设为true才能用千位分割器等功能

  • separator: string

指定千位分隔符的字符,比如说最常见的”,”

  • decimal: string

指定小数字符

  • prefix: string

动画值前缀

  • suffix: string

动画值后缀,可以加单位

  • className: string

span元素的CSS类名

  • redraw: boolean

如果设置为true,CountUp组件将始终在每个重新渲染上进行动画处理。

  • onComplete: function

动画完成后调用的函数

  • onStart: function

在动画开始前调用的函数

  • easingFn: function

Easing function,一般用不到

  • formattingFn: function

用于自定义数字格式的方法

再做一个复杂点的例子:

import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';

const onComplete = () => {
  console.log('Completed! ?');
};

const onStart = () => {
  console.log('Started! ?');
};

render(
  <CountUp
    className="account-balance"
    start={160527.0127}
    end={-875.0319}
    duration={2.75}
    useEasing={true}
    useGrouping={true}
    separator=" "
    decimals={4}
    decimal=","
    prefix="EUR "
    suffix=" left"
    onComplete={onComplete}
    onStart={onStart}
  />,
  document.getElementById('root'),
);

放在实际项目中,我们用的是dva,

import CountUp from 'react-countup';

...
<CountUp
    start={0}
    end={bls}
    duration={2.75}
    useEasing
    useGrouping
    separator=","
    suffix="份"
/>

这是最常用的写法和属性

如果我们有多个需要显示数字的地方,每次都这样写未免臃肿

这时候可以这样

import CountUp from 'react-countup';

...
const countUpProps = {
    start: 0,
    duration: 2.75,
    useEasing: true,
    useGrouping: true,
    separator: ',',
};
<CountUp
    end={bls}
    suffix="份"
    {...countUpProps}
/>

这样写只需要加数字和单位即可,还可以多次复用,是不是很优雅?

没有更多推荐了,返回首页