countUp.js在react中的应用

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

demo在查看CountUp.js工具demo

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

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

安装

使用npm或yarn均可

yarn add react-countupnpm 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(<CountUpclassName="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';...
<CountUpstart={0}end={bls}duration={2.75}useEasinguseGroupingseparator=","suffix="份"
/>

这是最常用的写法和属性

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

这时候可以这样

import CountUp from 'react-countup';...
const countUpProps = {start: 0,duration: 2.75,useEasing: true,useGrouping: true,separator: ',',
};
<CountUpend={bls}suffix="份"{...countUpProps}
/>

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

countUp.js在react中的应用相关推荐

使用countup.js使数字动态叠加
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
react中js文件中写html,javascript – 使用静态HTML与React
如果您希望在页面加载时加载所有html,则应在构建过程或服务器中动态创建脚本: var PAGE_HTML={"page1.html": "..."," ...
react中引入html文件,在react中怎么引用js
在react中怎么引用js 推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入. 第一种:使用插件 react-load-script 如果 ...
React中的dav.js脚手架
文章目录安装 dva-cli 创建新应用 Dav目录使用 antd 定义路由编写 UI Component 定义 Model connect 连接 Model 和 Route 页面下的数据安装 ...
React中的定时器-js
React中的定时器 react中每次状态改变都会导致页面更新,因此定时器得有特殊的配置,不然每次页面更新都会重开一个定时器每个setTimeout用完之后都是立刻销毁的并且由于setInterv ...
处理 react_【学习教程】React 中阻止事件冒泡的问题
来源 | https://www.cnblogs.com/Wayou/p/react_event_issue.html 在正式开始前,先来看看 js 中事件的触发与事件处理器的执行. js 中事件的监 ...
react中纯函数_如何在纯React中创建电子邮件芯片
react中纯函数 by Andreas Remdt 由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure Reac ...
boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画
最简单的动画组件实现动画的本质,无非就是一个状态样式到另一个状态样式的过渡.最简单的动画组件,我们只需要指定两个状态的样式(进入的样式,离开的样式),以及一个开关(控制状态),即可完成. codep ...

countUp.js在react中的应用

countUp.js在react中的应用相关推荐

最新文章

热门文章