开局一张动态图，看看效果。
1.gif
具体实现
<template>
<div class="demo">
<ul class="fp-box">
<!-- 需要显示6列 -->
<li ref="li" v-for="i in 6" :key="i">
<!-- 每列中的10行数字 -->
<span v-for="num in 10" :key="num">{{ num - 1 }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
numberArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], //固定每列中的19行数字
numStr: "", // 需要展示的数字字符串
numArr: [0, 0, 0, 0, 0, 0] //默认展示6个数字数组
};
},
mounted() {
setTimeout(() => {
this.numStr = "194";
this.numArr = this.numStr.split("");
let numArrlen = this.numArr.length;
// 展示数字的处理，不够6位前面补0
for (let i = 0; i < 6 - numArrlen; i++) {
this.numArr.unshift(0);
}
this.$refs.li.forEach((item, index) => {
let ty = this.numArr[index];
// 滚动数字(li标签)
item.style.transform = `translateY(-${ty * 30}px)`;
});
}, 2000);
setTimeout(() => {
this.numStr = "875623";
this.numArr = this.numStr.split("");
let len = this.numArr.length;
for (let i = 0; i < 6 - len; i++) {
this.numArr.unshift(0);
}
this.$refs.li.forEach((item, index) => {
let ty = this.numArr[index];
item.style.transform = `translateY(-${ty * 30}px)`;
});
}, 4000);
setTimeout(() => {
this.numStr = "76";
this.numArr = this.numStr.split("");
let len = this.numArr.length;
for (let i = 0; i < 6 - len; i++) {
this.numArr.unshift(0);
}
this.$refs.li.forEach((item, index) => {
let ty = this.numArr[index];
item.style.transform = `translateY(-${ty * 30}px)`;
});
}, 6000);
}
};
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.fp-box {
display: flex;
overflow: hidden;
li {
width: 30px;
height: 30px;
flex-direction: column;
transition: transform 1s ease-in-out;
span {
text-align: center;
background-image: linear-gradient(90deg, #ff8464 0%, #ff6e5c 100%);
box-shadow: 0 3px 16px 0 rgba(3, 5, 21, 0.12);
font-size: 24px;
color: #ffffff;
display: flex;
display: inline-block;
width: 30px;
height: 30px;
}
}
}
</style>
