項目數(shù)據(jù)交易金額翻滾 (數(shù)字翻滾效果

主要思路:

• 將數(shù)字拆分合并為數(shù)組，把數(shù)組中為數(shù)字的每一項替換為0-9標(biāo)簽，外層data-*為原數(shù)字

• 用原數(shù)字乘每個數(shù)字（頁面0-9標(biāo)簽）的高度得到數(shù)字當(dāng)前要顯示的位置。

number(digit) {
                var num_arr = [];
                for (var i = 0; i < digit.length; i++) {
                    num_arr.push(digit[i]);
                }
                var str = '',
                    numlength = num_arr.length,
                    numLabel = '';
                for (var i = 0; i <= 9; i++) {
                    numLabel += ` <span class="num">${i}</span>`
                }
                for (var i = 0; i < numlength; i++) {
                    if (parseInt(num_arr[i]) >= 0) {
                        str += '<div  class="digit-container"  data-show=' + num_arr[i] + '> ' + numLabel + '</div>';
                    } else {
                        str += '<div ><span>' + num_arr[i] + '</span></div>';
                    }
                }
                this.dom = str;
                this.$nextTick(() => {
                    let obj = document.getElementsByClassName("digit-container");
                    let numDom = document.getElementsByClassName("num")[0];
                    for (let i in obj) {
                        if (typeof obj[i] == 'object') {
                            obj[i].style.transition = `all ${this.rollingSpeed}s`
                            obj[i].style.marginTop = -(Number(obj[i].dataset.show) * numDom.offsetHeight) + "px"
                            obj[i].style.width = numDom.offsetWidth + this.fontSpacing + "px"
                        }
                    }
                })
            }

組件

<template>
    <view class="content">
        <view class="box" :style="fontColorSize" v-html="dom"></view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                dom: ''
            }
        },
        watch: {
            rollNumber: function(newnum, oldnum) {
                this.number(this.rollNumber)
            }
        },
        props: {
            rollNumber: { //滾動的數(shù)字
                type: String,
                default: '5.548'
            },
            fontSpacing: { //數(shù)字間距 >8
                type: Number,
                default: 1
            },
            rollingSpeed: { //滾動速度
                type: Number,
                default: 1.5
            },
            fontColorSize: { //字體大小以及顏色
                type: String,
                default: ''
            }
        },
        created() {
            this.number(this.rollNumber)
        },
        methods: {
            number(digit) {
                var num_arr = [];
                for (var i = 0; i < digit.length; i++) {
                    num_arr.push(digit[i]);
                }
                var str = '',
                    numlength = num_arr.length,
                    numLabel = '';
                for (var i = 0; i <= 9; i++) {
                    numLabel += ` <span class="num">${i}</span>`
                }
                for (var i = 0; i < numlength; i++) {
                    if (parseInt(num_arr[i]) >= 0) {
                        str += '<div  class="digit-container"  data-show=' + num_arr[i] + '> ' + numLabel + '</div>';
                    } else {
                        str += '<div ><span>' + num_arr[i] + '</span></div>';
                    }
                }
                this.dom = str;
                this.$nextTick(() => {
                    let obj = document.getElementsByClassName("digit-container");
                    let numDom = document.getElementsByClassName("num")[0];
                    for (let i in obj) {
                        if (typeof obj[i] == 'object') {
                            obj[i].style.transition = `all ${this.rollingSpeed}s`
                            obj[i].style.marginTop = -(Number(obj[i].dataset.show) * numDom.offsetHeight) + "px"
                            obj[i].style.width = numDom.offsetWidth + this.fontSpacing + "px"
                        }
                    }
                })
            },
        },

    }
</script>

<style scoped>
    .content {
        display: flex;
        justify-content: center;
    }

    .box {
        overflow: hidden;
        display: flex;
        height: 30px;
    }

    >>>span {
        display: block;
    }
</style>

效果圖

image