表格改成轮播表格效果

//使用表格组件

重点（js 设置部分）

//为表格添加事件let isScroll = true;nextTick(() => {  let div: HTMLElement | null = document.querySelector(".el-table");  console.log("div", div);  if (div) {    div.style.height = "330px";    div.addEventListener("mouseenter", function() {      isScroll = false;    });    div.addEventListener("mouseleave", function() {      isScroll = true;    });    let t = document.querySelector(".el-table__body") as HTMLElement;    if (t) {      setInterval(() => {        if (isScroll) {          var data = waitApproData.value[0];          setTimeout(() => {            waitApproData.value.push(data);            t.style.transition = "all .5s";            t.style.marginTop = "-41px";          }, 500);          setTimeout(() => {            waitApproData.value.splice(0, 1);            t.style.transition = "all 0s ease 0s";            t.style.marginTop = "0";          }, 1000);        }      }, 2500);    }  }});

设置 margin-top 变化是为了每条数据都产生一次位移效果，模拟向上滑动效果，如果只设置一次就只会第一条数据产生位移效果

涉及到的知识点margin 设置为负值

  1. margin-left,margin-right:
  • 没设置宽度时，宽度增加
  • 有设置宽度时，产生位移效果
  1. margin-top:
  • 不管是否设置高度，都不会增加高度，而是会产生向上的位移
  1. margin-bottom:
  • 不会位移，高度减少，使该元素的后一个元素产生位移效果

css 属性 style.transition

  • transition 设置过渡效果

参考

  • margin 为负值
  • 轮播图效果

本文来自作者：小黄H的笔记，转载请经过本人同意