Element Plus + ts 数据自动轮播

某位不知名的爱先生

已于 2024-02-19 10:25:39 修改

阅读量701

点赞数 9

文章标签： javascript 前端 vue.js

于 2024-02-19 10:19:11 首次发布

本文链接：https://blog.youkuaiyun.com/wenyun936/article/details/136163827

版权

话不多说先上效果图

实现

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