在vue内实现动态滑动列表
思路:通过定时器来控制,循环次数,每过3s开启定时器,触发事件;同时将数组内第一位的数据调用 push()转移到数组的末尾,并将其删除调用 shift()。move节点是存在与否来触发动画。
<HTML>
<template>
<div class="father">
<div :class="{'move' : animateUp}">
<div v-for="(item,index) in orgAmount" :key="index" class="children">
{{item.name}}
</div>
</div>
</div>
</template>
HTML解析:father为父容器,主要控制子内容超出隐藏,此时滚动才能显示的更直观。move:控制是否开启动画,css控制,move节点存在的时候,即可开启动画。
<JS>
mounted() {
setInterval(this.autoLoop, 3000);
},
methods: {
autoLoop () { // 无缝滚动方法
// 假如外边需要重新触发时,则需要重新执行里面的定时器,因此需要清楚掉,再重新计时
if(this.timer){
clearTimeout(this.timer)
}
this.animateUp = true // 触发css样式向上滑动,实现先滑动再改变
// 同时开启定时器,需要先等待2.5s后再执行(使用该定时器的主要原因)
this.timer = setTimeout(() => {
this.animateUp = !this.animateUp
this.orgAmount.push(this.orgAmount[0])
this.orgAmount.shift()
}, 2500)
// console.log(1)
}
},
JS解析:
mounted:页面挂载完成后,开启定时器setInterval,每次经过3s后触发autoLoop事件
autoLoop:该事件主要控制 animateUp 的true OR false;即是否启动动画,还有就是数组内数据的转移。
疑问:为什么要清楚定时器??clearTimeout(this.timer)
该案例其实可以不用清除定时器,因为循环定时器 3s 才执行一次,而函数内的单次响应定时器是 2.5s 才会执行一次,所以不存在冲突问题。清除定时器是因为 当你需要多次触发,但只需要执行响应一次的时候(场景:按钮点击刷新)
疑问:为什么还需要单次定时器??
因为需要数据转移,以及将动画取消,当时没有单次定时器的话,响应是同时的。我们需要的是需要等待一段事件后(等待动画完成后),才响应变化。
<CSS>
.father{
height: 60px;
overflow: hidden; //超出部分进行隐藏
}
.move{
transition: all 2.5s; //设置过渡动画
transform: translateY(-21px); //使用transform来代替margin的移动,过渡更加平滑
}
.children{
height:30px
}