Vue3实现公告滚动效果

工具：vue3 + ts + element-plus

1. 实现效果

2. 思路

代码逻辑实现起来挺简单，就是通过循环定时器，定时修改数据，然后通过vue的响应式渲染即可

3. 代码实现

<script lang="ts" setup>
import {ref} from "vue";
import request from "@/api/request";
import urls from "@/api/urls";

let noticeList = ref([]); // 存储所有公告数据的数组
const index = ref(0) // 当前公告在数组中的索引
const notice = ref(""); // 当前公告

// 向后端请求所有的公告数据
const getNoticeData = () => {
    request.get(`${urls.API_SYSTEM_NOTICE}/selectAll`).then(res => {
        if (res.code == 200) {
            noticeList.value = res.data;
            notice.value = res.data[0]; // 初始化为第一条公告
        }
    })
}
getNoticeData();

// 循环定时器，定时改变索引，然后再通过索引去数组中获取其他的公告数据，然后就改变当前的公告数据，这样就达到动态修改公告数据
setInterval(() => {
    if (index.value == noticeList.value.length - 1) index.value = 0; // 判断索引是否越界，越界则从头开始
    notice.value = noticeList.value[index.value]; // 修改数据
    index.value++; // 索引+1
}, 2000) // 定时2秒修改一次
</script>

<template>
    <div class="container">
        <el-card style="width: 500px">
            {{ notice.title }}
        </el-card>
    </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>