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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/liuyuqin1991/article/details/80758324

老样子,先上图(mock数据)
这里写图片描述

1.实现方法

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%;
  }
}
展开阅读全文

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