前言：用於展示生產線數據相關信息 在車輛生產線的小屏幕上【西門子的，比1980*1080的要小一圈，比pad要大一圈，專門給生產線做的】展示數據。數據用的flex佈局，很簡單的解決了自適應的問題。效果很好。 但，image展示的圖片的寬高不勻稱，比例不同。 這是開始的代碼，只摘取了關鍵部分： <bo ...
表格改成輪播表格效果
//使用表格組件
<el-table ref="waitTable" :data="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 = 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 設置過渡效果
參考
本文來自作者：小黃H的筆記，轉載請經過本人同意
