实现原理:在滚动时需要将第一个元素,添加到元素的最后,并将第一个元素删除。定义一个变量控制动画效果。
<template>
<div class="marquee-wrap">
<ul class="marquee-list" :class="{ 'animate-up': obj.animateUp }">
<li v-for="item in obj.arr">{{ item }}</li>
</ul>
</div>
</template>
<script setup lang="ts">
let obj = reactive({
arr: [
"********已获奖金60元",
"********已获奖金40元",
"************ 成功邀请1人 已获奖金5元",
],
count: 0,
animateUp: false,
});
const props = withDefaults(defineProps<{ time: number; textTime?: number }>(), {
textTime: 500,
});
let timer: any = null;
function scrollAnimate() {
const { animateUp, arr } = toRefs(obj);
animateUp.value = true;
setTimeout(() => {
arr.value.push(arr.value[0]);
arr.value.shift();
animateUp.value = false;
}, props.textTime);
}
timer = setInterval(scrollAnimate, props.time);
onUnmounted(() => {
clearInterval(timer);
});
</script>
<style scoped lang="scss">
.marquee-wrap {
width: 80%;
height: 40px;
border-radius: 20px;
box-shadow: var(--el-box-shadow-light);
margin-bottom: 20px !important;
background: rgba($color: #fff, $alpha: 1);
margin: 0 auto;
overflow: hidden;
.marquee-list {
li {
width: 100%;
height: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 0 20px;
list-style: none;
line-height: 40px;
text-align: center;
font-size: 18px;
font-weight: 400;
}
}
.animate-up {
transition: all 0.5s ease-in-out;
transform: translateY(-40px);
}
}
</style>
补充功能:当鼠标移入时,停止滚动。鼠标移除时,继续滚动
<li
@mouseover="handleMethods"
@mouseleave="handelLeave"
v-for="item in obj.arr"
>
{{ item }}
</li>
// 移入鼠标
const handleMethods = () => {
clearInterval(timer);
};
// 移除鼠标
const handelLeave = () => {
timer = setInterval(scrollAnimate, props.time);
};