Angular实现表格⾃滚动效果⽬录
表格⾃滚动效果图
实现原理
具体实现：
表格⾃滚动效果图
实现原理
原理：每⼀次的滚动都是在其setInterval（）定时器的作⽤下，每次将DOM.scrollTop++
具体实现：
1、 .html 代码如下：（这⾥我使⽤div模拟成table）
html滚动效果代码
<div >
<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 = ElementById('parent');//获取Dom
var child1 = ElementById('child1');//获取Dom
var child2 = ElementById('child2');//获取Dom
child2.innerHTML = child1.innerHTML;
if((parent.scrollTop++) == (parent.scrollTop)&&(parent.scrollTop!=0)) {
parent.scrollTop = 0;
} else {
parent.scrollTop++;
}
}, 50);
}
mysetInterval//定时器名字
ngOnDestroy() {//每当 Angular 每次销毁指令/组件之前调⽤并清扫
setInterval)//关闭循环
}
到此这篇关于Angular实现表格⾃滚动效果的⽂章就介绍到这了，更多相关Angular表格⾃滚动内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。