数字变化时的滚动效果，VUE组件化
1.外部引入
styleHeight：样式的高度，Number: 数字大小
<compute-number
:styleHeight="44"
:number="Number(1905)"
>
</compute-number>
2.组件代码
<template>
<div >
<div class="nwwest-roll" :height': styleHeight + 'px'}" >
<ul >
<li v-for="(item, index) in list" :height': styleHeight + 'px'}" ref="rollul" class="rollLi" :class="{anim:animate==true}">
<span class="name">{{item}}</span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
// 此处是模拟数字变化，所以数字都不会改变，
props: {
number: {
type: Number,
default: 0
},
styleHeight: {
type: Number,
default: 0
}
},
watch: {
number (newValue, oldValue) {
this.list[1] = newValue
this.list[0] = oldValue
this.num = newValue;
}
},
data () {
return {
animate: true,
list: [this.number, this.number],
num: this.number,
newNum: this.number,
timeout: '',
timeInterval: ''
}
},
mounted () {
this.timeInterval = setInterval(() => {
this.scroll(this.number);
}, 4000);
},
beforeDestroy() {
clearInterval(this.timeout)
clearInterval(this.timeInterval)
},
methods: {
scroll(num){
let con1 = this.$refs.rollul;
/* styleHeight */
// let marginTopHeight = (this.styleHeight - 10) + 'px'
con1[0].style.marginTop = 0;
this.animate = !this.animate;
var that = this;
that.timeout = setTimeout(() =>{
that.list[1] = num
con1[0].style.marginTop = -this.styleHeight + 'px';
that.animate = !that.animate;
setTimeout(() => {
that.list[0] = num
}, 1000);
}, 80)
}
}
}
</script>
<style scoped>
.nwwest-roll {
overflow: hidden;
}
.nwwest-roll .name{
display: inline-block;
}
.roll-ul {
list-style: none;
padding: 0;
margin: 0;
}
.anim {
transition: all 1s;
}
</style>