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()
  })
相关推荐
LuciferHuang2 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing2 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20152 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言3 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手3 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言3 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen4 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang
你的人类朋友5 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手5 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3