直接复制粘贴就可以使用
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.number {
margin-bottom: 10px;
text-align: center;
}
.number ul {
display: inline-block;
height: 40px;
text-align: center;
}
.number ul li {
float: left;
width: 40px;
height: 40px;
text-align: center;
margin: 0 4px;
background: url("../assets/images/yuyueshf/number.png") no-repeat center;
background-size: 100% 100%;
}
.number ul li .dataBoc {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.number ul li .dataBoc .tt {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.number ul li .dataBoc .tt span {
width: 100%;
height: 100%;
line-height: 40px;
float: left;
text-align: center;
font-size: 26px;
color: #f64841;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<div class="number">
<ul id="dataNums">
<li v-for="(item,index) in list" :key="index">
<div class="dataBoc">
<div class="tt" :style="{transition:'all 2.5s ease-in-out 0s',top:'-'+item.top+'px'}">
<span v-for="(item2,index2) in numList" :key="index2">{
{item2}}
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#demo',
// props: { number: Number },
data() {
return {
list: [],
number: '285673645854',
numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
mounted() {
this.scroll();
},
methods: {
scroll() {
this.list = this.number.toString().split('');
let arr = [];
this.list.forEach((value) => {
arr.push({ num: value, top: 0 })
});
this.list = arr;
let Hei = parseFloat(getComputedStyle(document.getElementById("dataNums")).height);
console.log('hei' + Hei)
this.list.forEach((value, index) => {
console.log(value)
setTimeout(() => {
value.top = parseFloat((value.num * Hei) + (Hei * 10));
}, index * 300);
});
console.log(this.list)
}
}
})
</script>
以上代码忘记在哪里看到的了,借鉴的其他博主的,找不到原文链接了,记录一下方便自己以后使用