VUE digital roll effect component
Number scrolling from bottom to top supports dynamic modification
template
<div class="numberScroll">
<div class="screenMini" v-for="(item,index) in numberToArray" :key="index">
<div :style="reStyle(item)">
<div v-for="(v,i) in numberBox" :key="i">{
{v}}</div>
</div>
</div>
</div>
script
export default {
props: {
/**
* 传入值String, Number
*/
number: {
type: [String, Number],
default: 0
}
},
data () {
return {
numberBox: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
numberToArray: []
}
},
methods: {
reStyle (number) {
return `transform:translate(0,-${
+number * 0.42}rem)`
}
},
watch: {
number: {
immediate: true,
deep: true,
handler (n) {
const arr = n.toString().split('')
this.numberToArray = new Array(arr.length).fill(0)
setTimeout(() => {
this.numberToArray = arr
}, 10)
}
}
}
}
style less
.numberScroll{
display: flex;
align-items: center;
.screenMini{
height: .42rem;
width: .26rem;
overflow: hidden;
&>div{
display: flex;
flex-direction: column;
transform: translate(0,0);
transition: all .6s;
&>div{
display: flex;
align-items: flex-end;
justify-content: center;
line-height:1;
overflow: hidden;
height: .42rem;
}
}
}
}