vue实现数字滚动效果

ScrollNumber.vue组件

<template>
    <div class="count-flop">
<!--    下面这行key随着value的改变而改变，value改变会让组件重新渲染，就会每一位数字都从0开始滚动，如果不需要这样的效果就不加key-->
<!--    <div class="count-flop" :key='compKey'>-->
        <div :class="item !== '.' && item !== ',' ?'count-flop-box':'count-flop-point'" v-for="(item, index) in value" :key="index">
            <div v-if="item === ','" class="count-flop-content count-flop-num">,</div>
            <div v-else-if="item === '.'" class="count-flop-content count-flop-num">.</div>
            <div v-else class="count-flop-content" :class="['rolling_' + item]">
                <div v-for="(item2,index2) in numberList" :key="index2" class="count-flop-num">{
   
   {item2}}</div>
            </div>
        </div>
        <div v-if="suffix" class="count-flop-unit">{
   
   {suffix}}</div>
    </div>
</template>

<script>
    export default {
        name: "scrollNumber",
        data() {
            return {
                value: [],
                numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                // compKey: 0
            };
        },
        props: ["val","suffix"],
        watch: {
            val() {
                this.value = this.val.toString().split("");
                // this.compKey += 1;
            }
        },
        created() {
            this.value = this.val.toString().split("");
        },
    }
</script>

<style scoped>
    .count-flop {
        position: relative;
        display: inline-block;
        line-height: 52px;
        height: 52px;
        color: #FFFFFF;
        font-size: 38px;
        font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
        font-weight: 500;
    }

    .count-flop > div {
        /*position: relative;*/
        display: inline-block;
        overflow: hidden;
        height: 100%;
    }

    .count-flop-box {
        /*margin-right: 6px;*/
        width: 25px;
        height: 57px;
        line-height: 48px;
        border-radius: 4px;
    }

    .count-flop-point {
        /*margin-right: 5px;*/
        width: 10px;
    }

    .count-flop-content {
        text-align: center;
       /* position: absolute;
        left: 0;
        top: 0;*/
        width: 100%;
        animation-fill-mode: forwards !important;
    }
    .count-flop-unit {
        width: 68px;
        height: 50px;
        line-height: 50px;
        border-radius: 4px;
        text-align: center;
        font-size: 16px;
        align-items: center;
        letter-spacing: 0.1em;
        color: #FFFFFF;
    }
    .rolling_0 {
        animation: rolling_0 2.1s ease;
    }

    .count-flop-num{
        /*要文字渐变色效果，不能加在class为count-flop这一级的元素，否则会被动画效果影响，我也试过加在设置动画效果的这一级元素，也会很奇怪。总结就是实现文字的渐变效果需要设置两级元素，最外层元素实现动画，文字的直接父级元素实现文字渐变效果*/
        text-shadow: 0 2px 14px #00B2CD;
        background: linear-gradient(180deg, #FFFFFF 0%, #00CFEE 100%);
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent;
    }

    @keyframes rolling_0 {
        from {
            transform: translateY(-90%);
        }
        to {
            transform: translateY(0);
        }
    }

    .rolling_1 {
        animation: rolling_1 3s ease;
    }

    @keyframes rolling_1 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-10%);
        }
    }

    .rolling_2 {
        animation: rolling_2 2.1s ease;
    }

    @keyframes rolling_2 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-20%);
        }
    }

    .rolling_3 {
        animation: rolling_3 3s ease;
    }

    @keyframes rolling_3 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-30%);
        }
    }

    .rolling_4 {
        animation: rolling_4 2.1s ease;
    }

    @keyframes rolling_4 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-40%);
        }
    }

    .rolling_5 {
        animation: rolling_5 3s ease;
    }

    @keyframes rolling_5 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-50%);
        }
    }

    .rolling_6 {
        animation: rolling_6 2.1s ease;
    }

    @keyframes rolling_6 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-60%);
        }
    }

    .rolling_7 {
        animation: rolling_7 3.1s ease;
    }

    @keyframes rolling_7 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-70%);
        }
    }

    .rolling_8 {
        animation: rolling_8 2.1s ease;
    }

    @keyframes rolling_8 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-80%);
        }
    }

    .rolling_9 {
        animation: rolling_9 3.6s ease;
    }

    @keyframes rolling_9 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-90%);
        }
    }
</style>

使用：

 <scrollNumber :val="formatNumber(val,2,1)"/>

 data:function(){
    return {val:3423423}
 }

 methods: {
    formatNumber(num, cent, isThousand) {
      num = num.toString().replace(/\$|\,/g, "");
      if (isNaN(num)) num = "0";
      let sign = num == (num = Math.abs(num));
      num = parseFloat(num.toFixed(cent));
      num = num.toString();
      let cents;
      if (num.lastIndexOf(".") != -1) {
        let index = num.lastIndexOf(".");
        cents = num.substring(index + 1, num.length);
      } else {
        cents = "";
      }
      num = Math.floor(num * Math.pow(10, cent) + 0.50000000001);
      num = Math.floor(num / Math.pow(10, cent)).toString();
      if (isThousand) {
        for (let i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
          num = num.substring(0, num.length - (4 * i + 3)) + "," + num.substring(num.length - (4 * i + 3));
      }
      if (cent > 0) {
        if (cents == "") {
          return (sign ? "" : "-") + num;
        } else {
          return (sign ? "" : "-") + num + "." + cents;
        }
      } else {
        return (sign ? "" : "-") + num;
      }
    },
}

这个代码是在网上找到的，就是里面的文字渐变色的样式调了很久。