表格改成轮播表格效果

古来稀

表格改成轮播表格效果

1. //使用表格组件
2. <el-table ref="waitTable" :data="waitApproData" >
3.   <el-table-column label="标准集" prop="sortName"></el-table-column>
4. </el-table>

复制代码

重点（js 设置部分）

1. //为表格添加事件
3. let isScroll = true;
4. nextTick(() => {
5.   let div: HTMLElement | null = document.querySelector(".el-table");
6.   console.log("div", div);
8.   if (div) {
9.     div.style.height = "330px";
10.     div.addEventListener("mouseenter", function() {
11.       isScroll = false;
12.     });
13.     div.addEventListener("mouseleave", function() {
14.       isScroll = true;
15.     });
16.     let t = document.querySelector(".el-table__body") as HTMLElement;
17.     if (t) {
18.       setInterval(() => {
19.         if (isScroll) {
20.           var data = waitApproData.value[0];
21.           setTimeout(() => {
22.             waitApproData.value.push(data);
23.             t.style.transition = "all .5s";
24.             t.style.marginTop = "-41px";
25.           }, 500);
26.           setTimeout(() => {
27.             waitApproData.value.splice(0, 1);
28.             t.style.transition = "all 0s ease 0s";
29.             t.style.marginTop = "0";
30.           }, 1000);
31.         }
32.       }, 2500);
33.     }
34.   }
35. });

复制代码

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

margin 设置为负值

• margin-left,margin-right:
  

• 没设置宽度时，宽度增加
  
• 有设置宽度时，产生位移效果
  

• margin-top:
  

• 不管是否设置高度，都不会增加高度，而是会产生向上的位移
  

• margin-bottom:
  

• 不会位移，高度减少，使该元素的后一个元素产生位移效果
  

css 属性 style.transition

• transition 设置过渡效果
  

参考

• margin 为负值
  
• 轮播图效果
  

来源:https://www.cnblogs.com/littleH/p/17130046.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！