Angular怎么实现表格自滚动效果

这篇文章主要为大家分析了Angular怎么实现表格自滚动效果的相关知识点，内容详细易懂，操作细节合理，具有一定参考价值。如果感兴趣的话，不妨跟着跟随小编一起来看看，下面跟着小编一起深入学习“Angular怎么实现表格自滚动效果”的知识吧。

表格自滚动效果图

实现原理

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

具体实现：

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

<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>

.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;            }          }        }      }    }  }}

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