vue3+TS 手动实现表格滚动

第一步定义变量

// 定义滚动定时器

const scrollInterval = ref<number | null>(null)

// 定义是否悬浮

const isHovered = ref(false)

// 定义初始化定时器

const initTimer = ref<number | null>(null)

// 定义底部暂停定时器

const bottomPauseTimer = ref<number | null>(null)

// 定义是否滚动到底部

const isAtBottom = ref(false)

// 是否滚动中

const isScrolling = ref(false)

第二部再html部分撰写内容

html 复制代码

<div
      class="content-box"
      ref="contentBoxRef"
      @mouseenter="isHovered = true"
      @mouseleave="isHovered = false"
    >
      <div v-for="(item, index) in props.dataList" :key="index" class="content-item">
        <template v-for="(row, number) in props.headerList" :key="row.key">
          <div class="row-item" :style="getRowItemStyle(row)">
            <img v-if="!number" class="ranking-item" :src="getImg(index)" alt="排位" />
            <span class="ellipsis-text">{{ item[row.key] }}</span>
          </div>
        </template>
      </div>
    </div>

第三步进行js代码部分撰写

javascript 复制代码

/**
   * @description: 启动自动滚动
   * @return {void}
   */
  const startAutoScroll = () => {
    if (scrollInterval.value || isScrolling.value) return

    // 初始延迟5秒
    isScrolling.value = false
    initTimer.value = window.setTimeout(() => {
      isScrolling.value = true
      doScroll()
    }, 3000)
  }

  /**
   * @description: 执行滚动
   * @return {void}
   */
  const doScroll = () => {
    if (scrollInterval.value) return

    scrollInterval.value = window.setInterval(() => {
      if (!contentBoxRef.value || isHovered.value || !isScrolling.value) return

      const { scrollTop, scrollHeight, clientHeight } = contentBoxRef.value
      const canScroll = scrollHeight > clientHeight
      const reachedBottom = scrollTop + clientHeight >= scrollHeight - 1

      if (canScroll) {
        if (reachedBottom && !isAtBottom.value) {
          // 到达底部，暂停5秒
          isAtBottom.value = true
          isScrolling.value = false
          if (scrollInterval.value) clearInterval(scrollInterval.value)
          scrollInterval.value = null

          bottomPauseTimer.value = window.setTimeout(() => {
            // 暂停结束后回到顶部
            contentBoxRef.value!.scrollTop = 0
            isAtBottom.value = false
            isScrolling.value = false
            startAutoScroll() // 重新开始滚动
          }, 3000)
        } else if (!reachedBottom) {
          // 正常滚动
          contentBoxRef.value.scrollBy({
            top: 1,
            behavior: 'smooth',
          })
        }
      }
    }, 50) as unknown as number
  }

  /**
   * @description: 停止所有滚动和定时器
   * @return {void}
   */
  const stopAllScroll = () => {
    if (initTimer.value) {
      clearTimeout(initTimer.value)
      initTimer.value = null
    }
    if (bottomPauseTimer.value) {
      clearTimeout(bottomPauseTimer.value)
      bottomPauseTimer.value = null
    }
    if (scrollInterval.value) {
      clearInterval(scrollInterval.value)
      scrollInterval.value = null
    }
    isScrolling.value = false
    isAtBottom.value = false
  }


  // 调用接口之后删除
  onMounted(() => {
    // 启动自动滚动（会有初始5秒延迟）
    startAutoScroll()
  })

  onUnmounted(() => {
    // 组件卸载时清除所有定时器
    stopAllScroll()
  })