本文详细介绍了如何在Vue中实现一个动态滑动列表，利用定时器和数组操作实现无缝滚动效果。通过设置CSS动画和Vue的data属性控制滑动状态，结合clearTimeout确保定时器的正确管理。此外，解释了为何需要清除定时器和使用单次定时器的原因，以确保动画的平滑过渡和数据的准确更新。
在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
}
1250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
