表格改成輪播表格效果
//使用表格組件
<el-table ref="waitTable" :data="https://www.cnblogs.com/littleH/archive/2023/02/17/waitApproData" style="margin-top: 10px">
<el-table-column label="標準集" prop="sortName"></el-table-column>
</el-table>
重點（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 = https://www.cnblogs.com/littleH/archive/2023/02/17/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 設定為負值
- margin-left,margin-right:
- 沒設定寬度時，寬度增加
- 有設定寬度時，產生位移效果
- margin-top:
- 不管是否設定高度，都不會增加高度，而是會產生向上的位移
- margin-bottom:
- 不會位移，高度減少，使該元素的后一個元素產生位移效果
css 屬性 style.transition
- transition 設定過渡效果
參考
- margin 為負值
- 輪播圖效果
本文來自作者：小黃H的筆記，轉載請經過本人同意
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544221.html
標籤：其他