vue3实现无限滚动，支持鼠标悬停

一，问题描述

 在大屏项目中需要实现一个列表上下滚动的效果，鼠标放上去要暂停，离开之后要继续滚动。之前有看见过很多类似的插件。但是我安装之后引入始终不对，最后决定自己写一个组件，方便之后复用和更改。

二、思路和方法

思路：使用scrollTop来做垂直滚动效果，设置定时器每隔200毫秒加1，获取每一行的高度来做判断，若scrollTop滚动的值与每行高度相等，就把这一行的数据保存在数组中，然后就完成无限滚动啦。但是这样会无限加数据，对性能不是很好，所以也要增加个判断看是否完成一轮滚动，完成一轮后重新赋值数组，这样就不会无限添加数组了。

具体方法：

html 

 <div ref="scrollTableRef" class="dv-warn-table-body" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll">
     <div ref="scrollRowRef" v-for="(item, index) in table" :key="'wt1'+ index" class="dv-warn-table-item dv-warn-table-bg">
          <div class="table-header-index">{{ item.id }}</div>
          <div class="table-header-time">{{ item.time }}</div>
          <div class="table-header-area">{{ item.area }}</div>
     </div>
</div>

js

<script setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue'
let table = ref([
  {id:1, time: '2024-07-02 12:33:12', area: '区域片段名称' },
  {id:2, time: '2024-07-02 12:33:12', area: '区域片段名称233'},
  {id:3, time: '2024-07-02 12:33:12', area: '区域片段名称ssss'},
  {id:4, time: '2024-07-02 12:33:12', area: '区域片段名称567g'},
  {id:5, time: '2024-07-02 12:33:12', area: '区域片段名称'},
  {id:6, time: '2024-07-02 12:33:12', area: '区域片段名称区域片段名称区域片段名称'},
  {id:7, time: '2024-07-02 12:33:12', area: '区域片段名称'},
  {id:8, time: '2024-07-02 12:33:12', area: '区域片段名称'},
])
// 列表轮播
const tableList = JSON.parse(JSON.stringify(table.value))
const length = tableList.length // 列表长度
const scrollTableRef = ref(null) // 滚动元素区域
const scrollRowRef = ref(null) // 滚动的行
let isAutoScrolling = true // 是否自动滚动
let index = 0 // 当前索引
let rowHeight = 0 // 滚动行的高度
const intervalId = ref(null) //定时器
// 自动滚动
const autoScroll = () => {
  intervalId.value = setInterval(() => {
    if (!isAutoScrolling) return
    const scrollTableEl = scrollTableRef.value
    rowHeight = scrollRowRef.value[0].offsetHeight // 获取滚动行高度
    scrollTableEl.scrollTop += 1 // 垂直滚动距离
    if (scrollTableEl.scrollTop % rowHeight === 0) { // 一行滚动完成，将当前行添加到table中
      table.value.push(table.value[index])
      index++
      // console.log('一行滚动完成', scrollTableEl.scrollTop, index, length)
      if (index === length) { // 整个表格滚动完成，重新开始
        // console.log('整个表格滚动完成，重新开始')
        scrollTableEl.scrollTop = 0
        index = 0
        table.value = tableList
      }
    }
  }, 200)
}
// 停止滚动
const stopAutoScroll = () => {
  isAutoScrolling = false
}

// 开始滚动
const startAutoScroll = () => {
  isAutoScrolling = true
  autoScroll()
}


onMounted(() => {
  startAutoScroll()
})

onUnmounted(() => {
  // 清理定时器
  if (intervalId.value) {
    clearInterval(intervalId.value)
  }
})
</script