站长资源网络编程
vue实现数字滚动效果
简介本文实例为大家分享了vue实现数字滚动的具体代码，供大家参考，具体内容如下
本文实例为大家分享了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" :style="ulStyles(noNumbers(item, key))" v-if="isNum(item)"> -->
<ul class="num-block_ul" :style="ulStyles(item, key)" 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 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 "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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：element跨分页操作选择详解