Element Plus + ts 数据自动轮播

话不多说先上效果图

实现

1.Element Plus 中自带的Scrollbar 滚动条 并不支持滚动 所以我们需要自己去定义一个盒子增加滚动的CSS

2.滚动中通过少量多次的行为去避免卡卡的效果

3.CSS滚动条样式美化与自定义

4.通过当前盒子绑定的ref去监听盒子总高度，滚动高度，距离高度

5.通过window.setInterval('用户执行滚动的方法'，'多少毫秒执行一次')，去增加自执行方法

然后上代码

// 测试实现功能

<template>
    <div class="scroll-container" ref="scrollContainer">
        <!-- 假设你有一个列表 -->
        <ul>
            <li v-for="item in items" :key="item">{{ item }}</li>
        </ul>
    </div>
</template>


<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';

const scrollContainer = ref<HTMLElement | null>(null);
const items = [...Array(50).keys()].map(i => `${generateRandomChinese(3)}${i + 1}`); // 示例数据
let intervalId: number | null = null;

const scrollToBottom = () => {
    if (scrollContainer.value) {
        scrollContainer.value.scrollTop += 2; // 每次滚动的像素值
        if (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight == scrollContainer.value.scrollTop) scrollContainer.value.scrollTop = 0 // 当以滚动高度与代码需要高度一致时将其重置并持续循环
        if (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight / 2 < scrollContainer.value.scrollTop) {
            clearInterval(intervalId as number);
        }
    }
};
/// 随机生成汉字方法  指定位数
function generateRandomChinese(length) {
    var result = '';
    var chineseChars: any = [];

    // 生成汉字数组
    for (var i = 0x4e00; i <= 0x9fa5; i++) {
        chineseChars.push(String.fromCharCode(i));
    }

    // 随机生成汉字字符串
    for (var j = 0; j < length; j++) {
        var randomIndex = Math.floor(Math.random() * chineseChars.length);
        result += chineseChars[randomIndex];
    }

    return result;
}


onMounted(() => {
    intervalId = window.setInterval(scrollToBottom, 20); // 每20毫秒执行一次滚动
});

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId);
    }
});


</script>

<style lang="scss">
.scroll-container {
    height: 100%;
    overflow: auto;
}

/// 滚动条样式模块设置
.scroll-container::-webkit-scrollbar {
    display: none;
}

.scroll-container::-webkit-scrollbar {
    width: 10px;
}

/* 定义滚动条轨道的样式 */
.scroll-container::-webkit-scrollbar-track {
    background: #f00;
}

/* 定义滚动条的样式 */
.scroll-container::-webkit-scrollbar-thumb {
    background: yellow;
}

/* 当鼠标放在滚动条上时的样式 */
.scroll-container::-webkit-scrollbar-thumb:hover {
    background: green;
}
</style>