react-countup 电子表数字样式 定时滚动 大屏需要 炫酷

一、电子表样式：

1.public-->static-->引入2个字体文件（如果小伙伴有需要 可以私信我 我不知道怎么传到简书上）

2.在入口文件index.ejs中

 

@font-face指定名为dsDigital的字体并指定在哪里可以找到他的url

3.其他用到该字体的页面 可以才less中直接写 font-family: 'dsDigital';

 

二、数字滚动：

1.下载

npm i react-countup -S

2.用到的页面引入

import CountUpfrom 'react-countup';

 

数字需要滚动

 

相关的属性 可以根据需要自行设置

3.效果 :

会有从0 升到100 的数字滚动变化效果

============更新2====================

4.需求:在不定时请求后台数据的情况下 定时让数字有滚动效果 

 

第2条 通过setState触发render

 

先给个初始值

 

写个方法 类似于标志位

 

这个key还没弄明白来源于哪里 有知道的小伙伴可以留言 只是知道可以这么写

页面上有多个地方用到数字滚动 所以自己封装了下

几个滚动数字的地方都会用到

后来 又看到还有一种很优雅的写法

 

以上两种都可以 看喜欢哪一种了

 

每隔5秒重新从0滚动到最后的数值 看起来比较炫酷一些

 

自己写的一个小demo