AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

rAF实现表格内容自动滚动

2022-06-25 312
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： rAF实现表格内容自动滚动

前言

实习导师让我实现表格内容自动滚动，实际就是大屏项目可能会用上的。正好之前看到rAF的介绍，实际上也没用过，所以就用rAF来玩一波。

目标：

  1. 让表格的内容会自动滚动
  2. 鼠标悬浮，动画停止
  3. 到底后会自动回到顶部，继续滚动

element表格自带滚动

首先呢，element的表格是自带了滚动效果的，但是需要小小的设置一下。

<template>
  <div class="mytable">
    <el-table :data="tableData" ref="mytable">
      <el-table-column prop="date" label="Date" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<script setup>
import { reactive } from "vue";

const tableData = reactive([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);
</script>

<style lang="less" scoped>
.mytable {
  width: 400px;
  height: 420px;
}
</style>

image-20220603093857433

可以发现，这个时候超过表格的部分直接溢出来了。

这个时候可能会想：直接使用overflow: auto;不就能实现表格滚动了吗？但是，这个表格滚动效果并不是想要的表格内容滚动。表头也会滚不见。

table

然后，我们使用Devtools工具看一下：

image-20220603094900993

发现上面红框框的元素高是100%，但是它们的父元素的高不是100%，所以外层的高并没有传过来。所以我们只需要把 el-scrollbar的祖先元素的高设置为100%即可。

table

又有新问题出现了：表格有一部分内容被切掉了。

这时候我们仔细想一下就会发现，上面的滚动的只是表格内容，但是实际上我们把高度慢慢地传下来了，所以这个时候的滚动盒子 el-scrollbar的高度也是整个表格的高度。所以我们需要将它的高度减掉表头的高度。

.el-scrollbar {
  height: calc(100% - 40px);
}

table

这样子，前置任务就初步完成了。

rAF介绍

rAF：requestAnimationFrame，实际上就是一个函数，会告诉浏览器：希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。

优点：

  • 由系统来决定回调函数的执行时机。如果显示器刷新的频率是60Hz，那么回调韩式就是每1/60s，即16.7ms执行一次。也就是说rAF会跟着显示器地刷新频率走，能保证回调函数在每一次的刷新间隔制备执行一次，这样就不会引起丢帧，动画更流畅。
  • 窗口没激活时，动画将暂停以提升性能和电池寿命

实现自动滚动

获取el-scrollbar 容器

需要实现自动滚动，首先得获取el-scrollbar 容器。访问路径在mytable -> scrollBarRef -> wrap$。

image-20220603184941374

onMounted(() => {
  const { proxy } = getCurrentInstance();

  const mytable = proxy.$refs.mytable;

  const el = mytable.scrollBarRef.wrap$;

  console.log(el);
});

编写动画方法，并使用rAF添加回调

首先，需要编写我们的滚动动画方法，很简单，只需要让滚动容器的scrollTop一直加就行了。但是，为了让这个动画不只是会执行一次，所以在最后还得使用rAF添加回调。当然，在onMounted钩子中也需要添加一次回调。

function myscroll(el) {
  el.scrollTop += 2;
  window.requestAnimationFrame(myscroll.bind(null, el));    // 该动画方法需要携带参数，所以使用bind方法来携带参数
}

table

鼠标悬浮，动画停止

我们上面已经初步让表格内容滚动起来了，接下来实现一下第二个步骤鼠标悬浮，动画停止

停止rAF动画，需要获取调用window.requestAnimationFrame()方法时返回的 ID，和定时器方法一样，所以我们调用window.requestAnimationFrame()方法时，需要使用一个变量接住它，方便停止的时候使用。

然后，绑定鼠标事件：mouseenter：动画停止，mouseleave：继续动画。

let rAFid;

onMounted(() => {
  const { proxy } = getCurrentInstance();

  const mytable = proxy.$refs.mytable;

  const el = mytable.$refs.scrollBarRef.wrap$;

  console.log(el);

  rAFid = window.requestAnimationFrame(myscroll.bind(null, el));

  el.addEventListener("mouseenter", () => {
    window.cancelAnimationFrame(rAFid);
  });

  el.addEventListener("mouseleave", () => {
    rAFid = window.requestAnimationFrame(myscroll.bind(null, el));
  });
});

function myscroll(el) {
  el.scrollTop += 2;
  rAFid = window.requestAnimationFrame(myscroll.bind(null, el)); // 该动画方法需要携带参数，所以使用bind方法来携带参数
}

table

到底后会自动回到顶部，继续滚动

这里我们需要判断是否到底了，所以需要使用可视高度+距离顶部 >= 整个高度的方式，即el.clientHeight + el.scrollTop >= el.scrollHeight.

我们判断到底后，就使用原生js的scrollTo方法，就能让它回到顶部。

function myscroll(el) {
  el.scrollTop += 2;
  if (el.clientHeight + el.scrollTop >= el.scrollHeight) {
    // cancelAnimationFrame(rAFid);
    el.scrollTo({
      top: 0,
    });
  }

  rAFid = requestAnimationFrame(myscroll.bind(null, el));
}

202206041101159.gif

可以看到已经实现了，而且是无缝衔接。

完整代码

<template>
  <div class="mytable">
    <el-table :data="tableData" ref="mytable">
      <el-table-column prop="date" label="Date" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue";

const tableData = reactive([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);

let rAFid;

onMounted(() => {
  const { proxy } = getCurrentInstance();

  const mytable = proxy.$refs.mytable;

  const el = mytable.$refs.scrollBarRef.wrap$;

  console.log(el);

  rAFid = window.requestAnimationFrame(myscroll.bind(null, el));

  el.addEventListener("mouseenter", () => {
    window.cancelAnimationFrame(rAFid);
  });

  el.addEventListener("mouseleave", () => {
    rAFid = window.requestAnimationFrame(myscroll.bind(null, el));
  });
});

function myscroll(el) {
  el.scrollTop += 2;
  if (el.clientHeight + el.scrollTop >= el.scrollHeight) {
    el.scrollTo({
      top: 0,
    });
  }

  rAFid = requestAnimationFrame(myscroll.bind(null, el));
}
</script>



<style lang="less" scoped>
.mytable {
  width: 400px;
  height: 420px;
  :deep(.el-table) {
    height: 100%;

    .el-table__inner-wrapper {
      height: 100%;
    }
    .el-table__body-wrapper {
      height: 100%;
    }

    .el-scrollbar {
      height: calc(100% - 40px);
    }
  }
}
</style>

额外研究

上面已经能够实现表格内容自动滚动了，但是有时候需要突出排在前面的话，可能会到顶部需要慢慢地回滚到顶部，再重新自动滚动。也就是说，scrollTo方法的参数添加 behavior: "smooth"来让它圆滑的回滚到顶部。

但是，我们添加了这个选项后，反而不回滚了。这是因为动画一直都还在，回滚速度又不够动画的。所以我们回滚前还得把动画给停止掉。

function myscroll(el) {
  el.scrollTop += 2;
  if (el.clientHeight + el.scrollTop >= el.scrollHeight) {
    window.cancelAnimationFrame(rAFid);

    el.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  } else {
    rAFid = requestAnimationFrame(myscroll.bind(null, el));
  }
}

table

回滚后，动画停了，所以我们还得添加一个定时器，回滚后停一会，再重新开始动画。

function myscroll(el) {
  el.scrollTop += 2;
  if (el.clientHeight + el.scrollTop >= el.scrollHeight) {
    window.cancelAnimationFrame(rAFid);

    el.scrollTo({
      top: 0,
      behavior: "smooth",
    });

    setTimeout(() => {
      rAFid = requestAnimationFrame(myscroll.bind(null, el));
    }, 1000);
  } else {
    rAFid = requestAnimationFrame(myscroll.bind(null, el));
  }
}

table

最后，还得添加一个钩子，清除rAF动画，避免内存泄漏等问题的发生。

onBeforeUnmount(() => {
  window.cancelAnimationFrame(rAFid);
});

参考：

  • requestAnimationFram优势
  • MDN
文章标签：
JavaScript
容器
赤蓝紫
目录
相关文章
No8g攻城狮
|
前端开发
【前端】elementUI表格根据状态显示不同的字体颜色
【前端】elementUI表格根据状态显示不同的字体颜色
No8g攻城狮
301 1
晚来南风晚相识
elementui表格内容超出显示省略号
elementui表格内容超出显示省略号
晚来南风晚相识
1054 0
lvbb66
|
3月前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
lvbb66
36 2
兜里只有三分钱~
uniapp滚动条置顶效果、自定义页面滚动条的位置（整理）
uniapp滚动条置顶效果、自定义页面滚动条的位置（整理）
兜里只有三分钱~
181 0
不脱发的程序猿
LabVIEW显示控件中内容过长设置自动滚动条
本篇博文分享程序设计时一个细节小技巧，在LabVIEW显示控件中内容过长设置自动滚动条。
不脱发的程序猿
436 0
授客
|
前端开发 测试技术
Easyui datagrid 设置内容超过单元格宽度时自动换行显示
Easyui datagrid 设置内容超过单元格宽度时自动换行显示
授客
419 0
还算善良
|
JavaScript
Vue组件中表格文字内容太长，自动变省略号，鼠标悬浮上去显示全称。
Vue组件中表格文字内容太长，自动变省略号，鼠标悬浮上去显示全称。
还算善良
742 0
赵小左
Element-ui表格的列隐藏显示会使表格头数据错乱或者表格头样式变大
Element-ui表格的列隐藏显示会使表格头数据错乱或者表格头样式变大
赵小左
429 0
suboysugar
|
XML PHP 数据安全/隐私保护
phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
转：http://www.cnblogs.com/huangcong/p/3687665.html   首先到phpexcel官网上下载最新的phpexcel类，下周解压缩一个classes文件夹，里面包含了PHPExcel.
suboysugar
1912 0
长沙红胖子Qt
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
长沙红胖子Qt
262 0
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法

热门文章

最新文章

  • 1
    Object reference not set to an instance of an object.
  • 2
    Map根据键、值进行排序
  • 3
    锐捷网络&视易K米，携手助力2016腾讯全球合作伙伴万人大会
  • 4
    Java中的定时器
  • 5
    Python正则表达式指南下下半部　
  • 6
    VirtualDesktop多媒体在何处解码?
  • 7
    文件移动脚本
  • 8
    xml在此生活
  • 9
    在不动用sp_configure的情况下，如何 =》去掉列的自增长，并保留原数据
  • 10
    聚焦技术实战！MDCC 2016 移动开发者大会盛大开幕
  • 1
    2024Mysql And Redis基础与进阶操作系列（6）作者——LJS[含MySQL 多表之一对一/多；多对多；多表联合查询等详解步骤及常见报错问题所对应的解决方法]
    32
  • 2
    猫头虎分享：鸿蒙生态带给开发者的全新机遇！轻松实现按需加载与多端适配，开发效率翻倍
    30
  • 3
    2024Mysql And Redis基础与进阶操作系列（5）作者——LJS[含MySQL DQL基本查询:select；简单、排序、分组、聚合、分组、分页等详解步骤及常见报错问题所对应的解决方法]
    25
  • 4
    理解 ES6 中的 Promise
    26
  • 5
    CSS 提高性能的方法
    23
  • 6
    CSS 预编语言的区别
    10
  • 7
    如何快速掌握 CSS 预编语言
    10
  • 8
    对 CSS 预编语言的理解
    12
  • 9
    利用缓存布局信息来减少回流和重绘的发生
    12
  • 10
    减少回流和重绘的发生
    12

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 图表样式智能美化工具
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月