vue3+<script setup>实现滚动通知栏,像高铁通知栏那种,三个通知轮流滚动
时间: 2024-10-01 07:10:05 浏览: 9
在Vue 3中,结合`<script setup>`语法,我们可以创建一个滚动通知栏组件,模拟高铁通知栏的效果,通常是通过动画和状态管理来实现。下面是一个简化的例子:
```html
<template>
<div class="notification-bar">
<transition-group tag="li" name="scroll-notification" v-for="(item, index) in notifications" :key="index">
<p>{{ item.message }}</p>
</transition-group>
</div>
</template>
<script setup>
import { ref } from 'vue';
const notifications = ref([
{
message: '通知1',
},
{
message: '通知2',
},
{
message: '通知3',
}
]);
// 定义动画过渡名称
const TRANSITION_NAME = 'fade';
// 模拟滚动效果,可以使用Intersection Observer API 或定时轮询检查滚动位置
const scrollHandler = () => {
// 省略具体的滚动计算逻辑...
if (/* 判断是否到达底部 */) {
notifications.value = notifications.value.slice(1); // 移除第一个通知并添加新的到数组末尾
}
};
onMounted(() => {
window.addEventListener('scroll', scrollHandler);
scrollHandler(); // 初始化显示第一个通知
})
beforeUnmount(() => {
window.removeEventListener('scroll', scrollHandler);
})
</script>
<style scoped>
.notification-bar {
overflow-y: auto;
height: 50px; /* 高度自定 */
}
.scroll-notification-enter-active,
.scroll-notification-leave-active {
transition: all 0.5s ease;
}
.scroll-notification-enter,
.scroll-notification-leave-to {
transform: translateY(100%);
}
</style>
```
在这个示例中,我们使用了`ref`来管理通知列表,并配合Vue的`v-for`和`transition-group`来实现元素的进出动画。当用户滚动到底部时,新消息会替换掉最旧的消息,形成滚动效果。