Angular實現表格自滾動效果
表格自滾動效果圖
實現原理
原理:每一次的滾動都是在其setInterval()定時器的作用下,每次將DOM.scrollTop++
具體實現:
1、 .html 代碼如下:(這裡我使用div模擬成table)
<div style="padding: 100px;"> <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 = 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表格自滾動內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!