vue 数字滚动组件

项目数据交易金额翻滚 (数字翻滚效果

主要思路:

• 将数字拆分合并为数组，把数组中为数字的每一项替换为0-9标签，外层data-*为原数字

• 用原数字乘每个数字（页面0-9标签）的高度得到数字当前要显示的位置。

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 += ` ${i}`
                }
                for (var i = 0; i < numlength; i++) {
                    if (parseInt(num_arr[i]) >= 0) {
                        str += '
 ' + numLabel + '
';
                    } else {
                        str += '
' + num_arr[i] + '
';
                    }
                }
                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"
                        }
                    }
                })
            }

组件

效果图

image