Angular实现表格自滚动效果
时间：2022-02-22 10:57:25 | 栏目：AngularJS | 点击：次
表格自滚动效果图
实现原理
原理：每一次的滚动都是在其setInterval（）定时器的作用下，每次将DOM.scrollTop++
具体实现：
1、 .html 代码如下：（这里我使用div模拟成table）
<div style="padding: 100px;">
<div class="tableTitleRow">
<div class="tabletTitle">Name</div>
<div class="tabletTitle">Age</div>
<div class="tabletTitle">Address</div>
</div>
<div id="parent" class="parent">
<div id="child1" class="child">
<div *ngFor="let data of listOfData;index as i">
<div class="tableBodyRow">
<div class="tabletBody">{{i}}</div>
<div class="tabletBody">{{i+10}}</div>
<div class="tabletBody">{{i+100}}</div>
</div>
</div>
</div>
<div id="child2" class="child"></div>
</div>
</div>
2、 .css 代码如下:
.Qbody {
padding: 100px;
// 表头层
.tableTitleRow {
display: flex;
.tabletTitle {
color: #ffffff;
background-color: #1e6fff;
height: 64px;
font-size: 16px;
flex: 1;
justify-content: flex-start;
text-align: center;
line-height: 64px;
border: 1px solid #ccc;
}
}
//内容层
.parent {
height: 380px; //控制多高处出现滚动条
margin: 0 auto;
background: #242424;
overflow-y: scroll;
.child {
/*设置的子盒子高度大于父盒子，产生溢出效果*/
height: auto;
div {
.tableBodyRow {
display: flex;
.tabletBody {
background: #ffffff;
font-size: 16px;
flex: 1;
justify-content: flex-start;
text-align: center;
line-height: 64px;
border: 1px solid #ccc;
div {
line-height: 30px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
}
}
}
}
}
}
3、 .js 代码如下：
ngOnInit(): void {
var parent = document.getElementById('parent');//获取Dom
var child1 = document.getElementById('child1');//获取Dom
var child2 = document.getElementById('child2');//获取Dom
child2.innerHTML = child1.innerHTML;
this.mysetInterval=setInterval(function () {
if((parent.scrollTop++) == (parent.scrollTop)&&(parent.scrollTop!=0)) {
parent.scrollTop = 0;
} else {
parent.scrollTop++;
}
}, 50);
}
mysetInterval//定时器名字
ngOnDestroy() {//每当 Angular 每次销毁指令/组件之前调用并清扫
clearInterval(this.mysetInterval)//关闭循环
}