react 自定义的数字样式滚动效果

老样子，先上图（mock数据）

1.实现方法

• 引入countup.js
• 数字滚动插件的react版本react-countup，github：https://github.com/glennreyes/react-countup
  自定义formattingFn方法

2.具体实现：

JS:

//引入react-countup
import CountUp from 'react-countup';

//定义start与end数字
let lastGmv = 0;
let currentGmv = 0;

//获取数据
componentDidMount(){
    //获取数据
    lastGmv = XXX;
    currentGmv = YYY;
}

//渲染
render(){
    const domFun = (value) => {
    let gmvDom = "";
    if (value){
        let gmv = [];
        gmv = formatData.formatAmount(value,0).split("");
        let dataNum = gmv.length;
        gmv.forEach(function (item,index) {
            if (item.match('^[0-9]*$')){
                if(dataNum - index === 6){
                    gmvDom += '<div class="gmv-num-wan">' + item + '<div class="gmv-num-wan-text">万</div></div>';
                }
                else if (dataNum - index === 11){
                    gmvDom += '<div class="gmv-num-yi">' + item + '<div class="gmv-num-yi-text">亿</div></div>';
                }
                else{
                    gmvDom += '<div class="gmv-num">' + item + '</div>';
                }
            }
            else{
                gmvDom += item;
            }
        });
    }
    return gmvDom;
    }



    <CountUp className="gmv-show-gmv" start={lastGmv} end={currentGmv} duration={1} formattingFn={domFun}/>
}

CSS:

.gmv-show-gmv{
  width: 100%;
  @extend .flex-row;

  .gmv-num-wan{
    background-color: #c50500;
    margin-right: 1%;
    height: 57%;
    width: 8%;
  }

  .gmv-num-wan-text{
    position:relative;
    font-size: 2vmin;
    line-height: 5vmin;
  }

  .gmv-num-yi{
    background-color: #c50500;
    margin-right: 1%;
    height: 57%;
    width: 8%;
  }

  .gmv-num-yi-text{
    position:relative;
    font-size: 2vmin;
    line-height: 5vmin;
  }

  .gmv-num{
    background-color: #c50500;
    margin-right: 1%;
    height: 57%;
    width: 8%;
  }
}