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()
  })
相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript