vue 实现数据滚动显示_vue实现数字滚动效果

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

,

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

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

if( i > 0 && i%3 == 0 ) {

dealData.push(',');

}

dealData.push(vals[i]);

}

dealData = dealData.reverse().join('');

return dealData;

}

}

};

.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