这篇文章将为大家详细讲解有关vue如何实现数字滚动效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
<template>
<div class="num-block">
<div class="num-block_show">
<div class="num-block_numbers" :class="{'ellipsis': !isNum(item)}" v-for="(item, key) in numbers" :key="key">
<!-- <ul class="num-block_ul" : v-if="isNum(item)"> -->
<ul class="num-block_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 class="num-block_ellipsis" v-else>,</div>
</div>
</div>
<!-- <div >
{{ 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>关于vue如何实现数字滚动效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
