vue实现数字滚动效果

本文实例为大家分享了vue实现数字滚动的具体代码，供大家参考，具体内容如下

<template> <div class='num-block'> <div class='num-block_show'> <div : v-for='(item, key) in numbers' :key='key'> <!-- <ul : v-if='isNum(item)'> --> <ul : v-if='isNum(item)'> <!-- <li v-for='(opt, index) in noNumbers(item, key)' :key='index'> {{ opt }} </li> --> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <div v-else>,</div> </div> </div> <!-- <div style='position:absolute;top:250px;left:0'> {{ this.numbers }} </div> --> </div></template><script> export default { name: 'ws-num-block', props: [’data’], data() { return { currentData: ’10’, lastData: ’10’ } }, computed: { numbers() { let data = this.data; if(!data) { return } data = this.dealData(data); return data; } }, watch: { data(val){ let lastData = this.currentData; this.currentData = this.dealData(val); this.lastData = lastData; } }, methods: { noNumbers(item, key) { let lastData = this.lastData; let lastItem = this.lastData[key]; let result = []; lastItem = lastItem ? lastItem : ’0’; if(lastItem != item) { if(lastItem == ’,’ || item == ’,’) { result.push(item); return result; }else { let meal = 0; if(Number(item) < Number(lastItem)) { meal = Number(item) + 10 - Number(lastItem); }else { meal = Number(item) - Number(lastItem); } for(let i=0;i<meal+1;i++) { if(Number(lastItem) > 9) {lastItem = 0; } result.push(lastItem.toString()); lastItem++; } return result; } }else { result.push(item); return result; } }, // ulStyles(arr) { ulStyles(item, key) { // if(!arr) { // return // } let top = 0; // let currentTop = -26 * Number(arr.length-1); let currentTop = -30 * Number(item); top = currentTop + ’px’; // top = 0; return { ’position’: ’absolute’, ’left’: 0, ’top’: top, ’width’: ’12px’, ’list-style’: ’none’, ’padding’: ’0’, ’margin’: ’0’, ’transition’: ’1s’ } }, isNum(val) { return val == ’,’ ? false : true }, dealData(val) { let vals = val.toString().split(’’).reverse(); let dealData = []; for(let i=0;i<vals.length;i++) { if( i > 0 && i%3 == 0 ) { dealData.push(’,’); } dealData.push(vals[i]); } dealData = dealData.reverse().join(’’); return dealData; } } };</script><style lang='sass'> .num-block width: 100% height: auto &_show display: flex justify-content: center height: 30px overflow: hidden &_numbers position: relative width: 14px &_numbers.ellipsis width: 6px &_ul>li height: 30px line-height: 30px &_ellipsis position: absolute left: 0 top: 0 width: 6px</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。