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[xss_clean] = child1[xss_clean];    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怎么实现表格自滚动效果"就介绍到这了,更多相关内容可以搜索以前的文章，希望能够帮助大家答疑解惑，请多多支持网站！