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

时间: 2022-01-14

基于angular实现树形二级表格

先看效果: 代码: 1.html <div class="userContent_content"> <div> <table> <tr> <td>节点名称</td> <td>节点管理IP</td> <td>节点登录名</td> <td>节点登录密码</td> </tr> //使用ng-container作为空标签用于辅助放置for

Angular8 实现table表格表头固定效果

最近项目中有个需求,表头固定,内部实现滚动条.除了单个表头,还有多个表头的情况(下一篇中介绍). 效果图: html 结构 按区域划分可以分为三个大部分,一共是通过4个table 组合成一个整体的table. 然后通过 col 属性去设定列的宽度,注意:这里的宽度必须要设置为固定值. 表头过滤功能暂时未实现. 水平滚动效果与垂直滚动效果 监听主体table(浅绿色部分)滚动事件,同步上下滚动头部的table (深绿色部分)和 左右滚动左侧固定的table(红色部分中的紫色部分) 代码 1 $(t

angularjs实现table表格td单元格单击变输入框/可编辑状态示例

本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态.分享给大家供大家参考,具体如下: html部分: <table> <thead> <tr > <th width="40px;">序号</th> <th>班次</th> <th>分组</th> <th>操作</th> </tr> </thead>

AngularJS中table表格基本操作示例

本文实例讲述了AngularJS表格基本操作.分享给大家供大家参考,具体如下: css内容: table, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } HTML正文: <body ng-app=""> <div ng-init="persons=[{'name':'zhangsan','age':'20'}, {'name':'lisi','age':'19'

angularJS实现表格部分列展开缩起示例代码

AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

Angular+ionic实现折叠展开效果的示例代码

1,html中 <ion-item> <div class="middle-content-order"> <div class="middle-order-icon"> <ion-icon name="chevron-up-outline" class="up-gray" item-right *ngIf="!isShow" (click)="isSho

用javascript 控制表格行的展开和隐藏的代码

无标题文档 function $(obj) { return document.getElementById(obj); } function close_open() { if($("myTr").currentStyle.display == "none") { $("myTr").style.display = ""; } else { $("myTr").style.display = "

vue+element UI实现树形表格带复选框的示例代码

一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-10-12 12:06:49 */ "use strict"; import Vue from "vue"; export default function treeToArray( data, expandAll, parent = null, level = null

java 自动生成略缩图示例代码

当你要做一个图库的项目时,对图片大小.像素的控制是首先需要解决的难题.一.单图生成略缩图单图经过重新绘制,生成新的图片.新图可以按一定比例由旧图缩小,也可以规定其固定尺寸.详细代码如下: 复制代码 代码如下: <SPAN style="FONT-SIZE: 14px">import com.sun.image.codec.jpeg.JPEGImageEncoder;import com.sun.image.codec.jpeg.JPEGCodec;import com.su

JQuery实现表格中相同单元格合并示例代码

代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>merge.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this

妙用Angularjs实现表格按指定列排序

使用AngularJS的过滤器,可以很容易的实现在表格中,点击某一列标题进行排序,实现过程如下: html代码: <table class="table table-border" ng-app="myapp" ng-controller="orderByCtrl"> <thead> <tr> <th>inx</th> <th ng-click="col='name';d

jQuery实现table表格信息的展开和缩小功能示例

本文实例讲述了jQuery实现table表格信息的展开和缩小功能.分享给大家供大家参考,具体如下: <%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+re

Python 实现取矩阵的部分列,保存为一个新的矩阵方法

首先输入一个矩阵: >>> b=[[1,2,3,4,5,6],[2,2,3,4,5,6],[3,2,3,4,5,6],[4,2,3,4,5,6],[5,2,3,4,5,6]] >>> b=np.array(b) >>> b array([[1, 2, 3, 4, 5, 6], [2, 2, 3, 4, 5, 6], [3, 2, 3, 4, 5, 6], [4, 2, 3, 4, 5, 6], [5, 2, 3, 4, 5, 6]]) 目标:取上述矩阵

AngularJS自定义指令详解(有分页插件代码)

前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写.如: myDirective. 在html页面调用该指令时需要以 - 分割,如: my-directive.示例代码: <body ng-app="myApp"> <my-directive><

AngularJS指令与指令之间的交互功能示例

本文实例讲述了AngularJS指令与指令之间的交互功能.分享给大家供大家参考,具体如下: 前面一篇文章<AngularJS指令与控制器之间的交互功能示例>我们了解了指令与控制器之间的交互,接下来看看指令与指令之间是如何进行交互的. 1.首先来了解一下什么是独立scope 为了更好的理解独立scope,我们来看一段代码: <div ng-controller="myController1"> <hello></hello> <hel