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();

// 循环定时器，定时改变索引，然后再通过索引去数组中获取其他的公告数据，然后就改变当前的公