Angular怎么实现表格自滚动效果(angular,开发技术)

表格自滚动效果图

实现原理

原理：每一次的滚动都是在其setInterval（）定时器的作用下，每次将DOM.scrollTop++

具体实现：

1、 .html 代码如下：（这里我使用div模拟成table）

<div><divclass="tableTitleRow"><divclass="tabletTitle">Name</div><divclass="tabletTitle">Age</div><divclass="tabletTitle">Address</div></div><divid="parent"class="parent"><divid="child1"class="child"><div*ngFor="letdataoflistOfData;indexasi"><divclass="tableBodyRow"><divclass="tabletBody">{{i}}</div><divclass="tabletBody">{{i+10}}</div><divclass="tabletBody">{{i+100}}</div></div></div></div><divid="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:1pxsolid#ccc;}}//内容层.parent{height:380px;//控制多高处出现滚动条margin:0auto;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:1pxsolid#ccc;div{line-height:30px;border-top:1pxsolid#ccc;border-bottom:1pxsolid#ccc;}}}}}}}

3、 .js 代码如下：

ngOnInit():void{varparent=document.getElementById('parent');//获取Domvarchild1=document.getElementById('child1');//获取Domvarchild2=document.getElementById('child2');//获取Domchild2.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)//关闭循环}