我改进了数据滚动方式！老板直接加薪
需求背景
前几天，甲方提了个需求，想让下面的数据循环展示，准备放在他们集团首页给他们领导演示用。
我们领导很重视这个事儿，拍了拍我，语重心长的说，小伙子，好好做。
我啪的一下就兴奋了，老板居然如此器重我，我必当鞠躬尽瘁，减少摸鱼，我要让老板拜倒在精湛的技术下！
于是，我搬出自己的库存代码，仅2min就实现了数据的滚动：
没错，我直接照搬了自己以前写过的文章：JS实现可滚动区域自动滚动展示 - 掘金
就在我准备告诉老板我做完了的时候，我突然想了想，这么快做完，老板一定觉得我没好好做，我以后还怎么升职加薪，赢取白富美？
于是，我连夜研究，终于改进了数据滚动方式，赢得了老板的大饼（以后涨500）。最终效果：
技术方案
技术选型
观察最终效果图，可以发现这其实就是一个数据循环滚动的效果，每条内容之间间隔1000ms，每条出现动的时间为500ms。用术语来说，这就是一个单步停顿滚动效果。
我百度了一下，社区还是有这个实现的现成方案的：vue-seamless-scroll，周下载也还行。
于是，我果断试了试，结果不知道什么原因，并不生效...
既然如此，直接手写一个吧！
实现思路
要实现上述效果其实很简单，如图
我们创造一个含有六个值的数组，每隔一段时间循环更改黄色区域的数据，当黄色区域数据变成最新的时候，红色区域整体向下移动，当有数值超出滚动区域后，在删除这个数据即可。
数据更新
如果不考虑动画，我们的代码应该这么写
<template>
<div class="item-wrap" v-for="(item, index) in animationData">
<!-- 模块内容 -->
</div>
</template>
<script setup lang="ts">
// #假设这是接口请求的10条最新数据
const allCarouseData = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// #需要轮播的数据
const animationData = ref<any>([])
// *定时器
const animationTimerMeta: any = {
timer: null,
// 这个函数负责设置轮播数据的更新逻辑。
timeFuc() {
let setTimeoutId: any = null
if (this.timer) return
this.timer = setInterval(() => {
// 取轮播数据的第一条id
let firstId = animationData.value[0].id
// 为轮播数据添加最新的第一项数据
let index = allCarouseData.value.findIndex((res: any) => res.id === firstId)
let addIndex = index - 1 < 0 ? allCarouseData.value.length - 1 : index - 1
animationData.value.unshift(allCarouseData.value[addIndex])
setTimeout(() => {
// 删除数组的最后一项
animationData.value.pop()
}, 1000)
}, 1500)
}
}
animationData.value = allCarouseData.value.slice(-5)
animationTimerMeta.timeFuc()
</script>
上述代码的主要功能是：
- 从 allCarouseData 中取出最后5个元素作为初始的轮播数据。
- 每1.5秒更新一次轮播数据，具体逻辑是：移除当前 animationData 的第一个元素，并从 allCarouseData 中取出前一个元素（如果已经是第一个元素，则取最后一个）添加到 animationData 的开头。
- 每1秒从 animationData 的末尾移除一个元素。
上述代码没有实现动画，他的效果是这样的：
动画添加
<template>
<div class="item-wrap" v-for="(item, index) in animationData"
:class="[{ moveToBottom: animationActive }, { show: animationActive && index === 0 }]"
>
<!-- 模块内容 -->
</div>
</template>
<script setup lang="ts">
// #假设这是接口请求的10条最新数据
const allCarouseData = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// #需要轮播的数据
const animationData = ref<any>([])
// #是否开启动画
const animationActive = ref(false)
// *定时器
const animationTimerMeta: any = {
timer: null,
// 这个函数负责设置轮播数据的更新逻辑。
timeFuc() {
let setTimeoutId: any = null
if (this.timer) return
this.timer = setInterval(() => {
// 取轮播数据的第一条id
let firstId = animationData.value[0].id
// 为轮播数据添加最新的第一项数据
let index = allCarouseData.value.findIndex((res: any) => res.id === firstId)
let addIndex = index - 1 < 0 ? allCarouseData.value.length - 1 : index - 1
animationData.value.unshift(allCarouseData.value[addIndex])
setTimeout(() => {
// 删除数组的最后一项
animationData.value.pop()
}, 1000)
}, 1500)
}
}
animationData.value = allCarouseData.value.slice(-5)
animationTimerMeta.timeFuc()
</script>
@keyframes moveToBottom {
0% {
transform: translateY(-47px);
}
100% {
transform: translateY(0);
}
}
.moveToBottom {
animation: moveToBottom 500ms ease-in-out forwards;
}
@keyframes fadeInFromTop {
0% {
opacity: 0;
transform: translateY(-47px);
}
100% {
opacity: 1;
transform: translateY(0);
color: #683BD6;
}
}
.show {
animation: fadeInFromTop 500ms ease-in-out forwards;
}
上述代码中，为了实现动画效果，采用了动态添加类名的技术方案。
animationData 数组中的元素会按照一定顺序进行显示和隐藏，同时伴随有动画效果。当第一个元素进入视图时，它会应用 fadeInFromTop 动画；其他元素会应用 moveToBottom 动画。通过定时器，元素会定期从 allCarouseData 中获取新的数据并更新 animationData。
代码释义：
- moveToBottom: 当 animationActive 为真值时，此类名会被添加到 div 上。
- show: 当 animationActive 为真值且当前元素是数组的第一个元素时，此类名会被添加到 div 上。
CSS 释义：
- moveToBottom 动画:
定义一个名为 moveToBottom 的关键帧动画，使元素从上方移动到其原始位置。
moveToBottom 类将此动画应用到元素上。
- fadeInFromTop 动画:
定义一个名为 fadeInFromTop 的关键帧动画，使元素从上方淡入并改变颜色。
show 类将此动画应用到元素上。
通过上述简单的实现方式，就能最终实现我们想要的效果
相比于普通滚动，这种方式看起来要好很多！
结语
要想实现这种单步停帧的效果，其实有很多实现方式，这只是笔者实现的一种，核心逻辑就是动态改变数据、增添类名。如果大家还有更好的方式，也欢迎大家指点。
来源：juejin.cn/post/7348433631944556555
