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表格自滚动内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！