Angular實現(xiàn)表格自滾動效果

更新時間：2022年01月14日 16:55:21 作者：y∩__∩y?歸來

這篇文章主要為大家介紹了如何通過Angular實現(xiàn)表格自動滾動的效果，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Angular有一定幫助，需要的可以參考一下

表格自滾動效果圖

實現(xiàn)原理

原理：每一次的滾動都是在其setInterval（）定時器的作用下，每次將DOM.scrollTop++

具體實現(xiàn)：

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;
? ? }
? }
? //內(nèi)容層
? .parent {
? ? height: 380px; //控制多高處出現(xiàn)滾動條
? ? margin: 0 auto;
? ? background: #242424;
? ? overflow-y: scroll;
? ? .child {
? ? ? /*設(shè)置的子盒子高度大于父盒子，產(chǎn)生溢出效果*/
? ? ? 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() {//每當(dāng) Angular 每次銷毀指令/組件之前調(diào)用并清掃
    clearInterval(this.mysetInterval)//關(guān)閉循環(huán)
  }

到此這篇關(guān)于Angular實現(xiàn)表格自滾動效果的文章就介紹到這了,更多相關(guān)Angular表格自滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: