当前位置:   article > 正文

el-table使用requestAnimationFrame自动滚动_el-table怎么实现滚动动画效果

el-table怎么实现滚动动画效果

 vue文件中 el-table使用requestAnimationFrame实现自动滚动

相比定时器更加丝滑

  1. data() {
  2. return {
  3. rAFid: "",
  4. }
  5. },
  6. methods:{
  7. myscroll(el) {
  8. el.scrollTop += 1;
  9. if (el.clientHeight + el.scrollTop >= el.scrollHeight) {
  10. el.scrollTo({
  11. top: 0,
  12. });
  13. }
  14. this.rAFid = requestAnimationFrame(this.myscroll.bind(null, el));
  15. },
  16. },
  17. mounted() {
  18. var me = this;
  19. const el = this.$refs.projectTable.$refs.bodyWrapper; //表格
  20. me.rAFid = window.requestAnimationFrame(me.myscroll.bind(null, el));
  21. el.addEventListener("mouseenter", () => { //鼠标悬停停止
  22. window.cancelAnimationFrame(me.rAFid);
  23. });
  24. el.addEventListener("mouseleave", () => { //鼠标移出开始
  25. me.rAFid = window.requestAnimationFrame(me.myscroll.bind(null, el));
  26. });
  27. }

本文内容由网友自发贡献,转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/193818
推荐阅读
相关标签
  

闽ICP备14008679号