Angular实现表格自滚动效果

这篇文章主要为大家介绍了如何通过Angular实现表格自动滚动的效果，文中的示例代码讲解详细，对我们学习Angular有一定帮助，需要的可以参考一下

表格自滚动效果图

实现原理

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

具体实现：

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

  Name
Age
Address
    {{i}}
{{i+10}}
{{i+100}}

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)//关闭循环 }

到此这篇关于Angular实现表格自滚动效果的文章就介绍到这了,更多相关Angular表格自滚动内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！

以上就是Angular实现表格自滚动效果的详细内容，更多请关注0133技术站其它相关文章！