Vue实现文字上下滚动动画的示例代码

　　import { onMounted, onUnmounted, ref, unref } from "vue";

　　import { getTransactionToday } from "@/services/common";

　　import store from "@/store";

　　import dayjs from "dayjs";

　　const data = ref([]);

　　let timer;

　　const getScrollText = async () => {

　　const res = await api()

　　data.value = res.data

　　return Promise.resolve(res.data);

　　};

　　let num = 2000;

　　const init = async () => {

　　clearTimeout(timer);

　　await getScrollText();

　　if (!unref(data).length) return;

　　if ([1,2].includes(unref(data).length)) {

　　// 这里的id可以改成其他字段，只要是唯一就行

　　for (let i = 0; i < (4-unref(data).length); i++) {

　　unref(data).push({ ...unref(data)[0], id: Date.now() + i });

　　}

　　}

　　let delData;

　　timer = setInterval(() => {

　　if (delData) {

　　unref(data).push(delData);

　　delData = null;

　　} else {

　　delData = unref(data)[0];

　　unref(data).shift();

　　}

　　}, num);

　　};

　　onMounted(() => {

　　init();

　　});

　　onUnmounted(() => {

　　clearInterval(timer);

　　});