angular实现表格无限循环滚动效果、鼠标移入停止滚动、鼠标移出继续滚动-组件封装

已于 2024-03-27 09:57:41 修改
阅读量248 收藏
点赞数 5
文章标签： angular.js 前端 typescript css
于 2024-03-26 17:32:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67862954/article/details/137052453
版权
文章描述了一个使用Angular编写的表格组件，包含滚动功能、表头自定义和数据绑定，以及鼠标事件的处理，如点击行触发事件。
摘要由CSDN通过智能技术生成
// ---表格组件-html
<!-- 表格滚动 -->
<div class="tableContainer">
    <div class="right_table_div" [ngStyle]="{height:scrollHeight+'px'}">
        <div class="table_title_div table_width_item">
            <div *ngIf="isSnumber" style="width: 120px;">序号</div>
            <div *ngFor="let item of theadListData;let index = index" [ngStyle]="{width: item['width']}">{{item.text}}</div>
        </div>
        <div class="table_items_div"  #scrollerListBox [ngStyle]="{'overflow': scrollerOverflow}" (mouseenter)="mouseEnterScroll()" (mouseleave)="mouseLeaveScroll()">
            <div class="table_item_div table_width_item" *ngFor="let item of tableData;let index = index" (click)="handleTableClick(item,index)" [ngClass]="avtiveTdIndex == index ? 'table-list-action' : ''">
                <div *ngIf="isSnumber" style="width: 120px;">{{index+1}}</div>
                <div *ngFor="let itemTbody of theadListData" [ngStyle]="{width: itemTbody['width']}" [ngClass]="itemTbody['isOverflow'] ? 'textOverflow' : ''">{{isNullHandleFn(item[itemTbody['fieldName']])}}</div>
            </div>
        </div>
    </div>
</div>
// ---表格组件-ts
import {Component,ViewEncapsulation,Input,Output,SimpleChanges,EventEmitter,ElementRef,ViewChildren, ViewChild,QueryList} from '@angular/core';

/**数据传参格式、参数说明
 * scrollHeight //容器高度(数字)
 * isSnumber //第一列是否显示序号(布尔值)
 * theadListData[{text:'',fieldName:'',width:'',isOverflow:true,}]:表头相关(数组)(有几列就写几条数据)
 *     text-表头文字（字符串）、
 *     fieldName-数据取值字段名（字符串）、
 *     width-每一列宽度（例如'25%'或者'100px'）（字符串）、
 *     isOverflow-当前列是否超出显示...（布尔值）
 * tableData[]:数据JSON
 */

@Component({
    selector: 'table-scroll',
    templateUrl: './table-scroll.component.html',
    styleUrls: ['./table-scroll.component.less'],
})

export class TableScrollComponent {
    constructor(
        
    ) {}

    @Input() scrollHeight;//容器高度
    @Input() isSnumber;//第一列是否显示序号
    @Input() theadListData;//表头数据JSON
    @Input() tableData;//数据JSON
    @Output() clickTrRowFn= new EventEmitter<string>();//点击每一行
    //ngOnChanges(changes: SimpleChanges) {
        
    //}

    // ---表格---
    avtiveTdIndex = -1;
    // 滚动列表
    @ViewChild('scrollerListBox', {static: false}) scrollerListBox: ElementRef;
    // 是否允许手动滚动
    scrollerOverflow: string = 'hidden';
    timer: any;
    times = 0;
    // 滚动列表方法
    scrollerFn() {
        // 获取页面元素
        const element = this.scrollerListBox.nativeElement;
        // 开始循环滚动
        this.timer = setInterval( () => {
            this.times++
            element.scrollTop = this.times;
            const marginBottom = element.scrollHeight  - element.scrollTop - element.clientHeight;
            // 如果当前滚动到底 10px 时追加数据
            if (marginBottom <= 5) {
                this.times = 0
            }
        }, 50); // 50 ms 滚动一次，基本是平滑滚动，再大一点就有点卡卡的感觉了
    }
    // 鼠标移入停止滚动
    mouseEnterScroll() {
        clearInterval(this.timer);
        // 允许手动滚动
        this.scrollerOverflow = 'auto';
    }
    // 鼠标移出开始滚动
    mouseLeaveScroll() {
        this.times = this.scrollerListBox.nativeElement.scrollTop;
        this.scrollerFn();
        // 采用自动滚动，隐藏滚动条
        this.scrollerOverflow = 'hidden';
    }
    handleTableClick(item,index){
        console.log(item,index)
        if(this.avtiveTdIndex === index){
            this.avtiveTdIndex = -1;
        }else{
            this.avtiveTdIndex = index;
        }
        this.clickTrRowFn.emit(item)
    }
    // ---表格---

    ngOnInit(): void {
        
    }
    ngAfterViewInit() {
        this.scrollerFn()
    }
    ngOnDestroy(){
        clearInterval(this.timer);
    }

    // 数值非空判断
    isNullHandleFn(val){
        if(val == undefined || val == "" || val == null || val == " "){
            return "-";
        }else{
            var source = String(val).split('.');//按小数点分成2部分
            source[0] = source[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)', 'ig'), '$1,');//只将整数部分进行都好分割
            return source.join('.');//再将小数部分合并进来
        }
    }
}
// ---表格组件-less
.tableContainer{
    .right_table_div{
        width: 100%;
        min-height: 300px;
        .table_title_div{
            height: 50px;
            width: 100%;
            text-align: center;
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            background:  url(theadBj.png) no-repeat;
            background-size: 100% 100%;
            font-size: 18px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #52DBFF;
            line-height: 50px;
        }
        .table_items_div{
            height: calc(100% - 50px);
            width: 100%;
            overflow-y: auto;
            &::-webkit-scrollbar {
                width: 4px;
            }
            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background: RGBA(46, 174, 255, 1);
            }
            &::-webkit-scrollbar-track {
                border-radius: 0;
                background: rgba(0,0,0,0.1);
            }
            .table_item_div{
                cursor: pointer;
                background:  url(tbodyBj-2.png) no-repeat;
                background-size: 100% 100%;
                width: 100%;
                height: 56px;
                display: inline-flex;
                justify-content: space-between;
                align-items: center;
                text-align: center;
                font-size: 18px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #D2E2FF;
                line-height: 56px;
            }
        }
        .textOverflow{
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow:ellipsis;
        }
        // 高亮当前行
        // .table-list-action{
        //     background: url(table_active.png) no-repeat!important;
        //     color: #FFFFFF!important;
        //     background-size: 99% 100%!important;
        // }
    }
}

// ---在用到的地方引用表格组件
<!-- 表格 -->
<table-scroll [scrollHeight]="600" [isSnumber]="true" [theadListData]="theadListData" [tableData]="tableData" (clickTrRowFn)="onClickTrRowFn($event)"></table-scroll>
tableData = [
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
        {ID_UNITNAME:'11',ID_VALUE:'22',TB:'33'},
    ]
    theadListData = [
        {text:'名称',fieldName:'ID_UNITNAME',width:'25%',isOverflow:true,},
        {text:'收益率（%）',fieldName:'ID_VALUE',width:'25%',isOverflow:false,},
        {text:'同比（±）',fieldName:'TB',width:'25%',isOverflow:false,},
    ]
    onClickTrRowFn(val){
        console.log(val)
    }
// ---效果图

m0_67862954
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular—数据循环
雷雨天的雷胖子
02-11 1683
目录 一、概述 二、循环实例 一、概述 Angular模板中使用*ngFor指令来循环数据。 二、循环实例 实例1 public list: any[] = [1, 2, 3]; public list: Array<any> = [1, 2, 3]; public list: Array<number> = [1, 2, 3]; publi...
vue+elementUI el-row和el-col 自动滚动table表格组件封装—基础版
彤先森的博客
01-17 824
vue 自动滚动table表格组件封装—基础版
angularJs - 滚动加载
抄经书的程序猿
09-28 660
以前写过vue 滚动加载、angular8 滚动加载，这次遇到angularJs 滚动加载，记录一下 1， html 页面 需要在滚动的div 上添加控制代码 ng-controller="myProController" 和滚动指令 when-scrolled="scrolledLoadMore()" <div class="ngdialog-message" bindonce> <div class="select-group-user-container" ng-
推荐使用Angular-Scroll：无缝集成的滚动优化库
最新发布
gitblog_00040的博客
05-13 312
推荐使用Angular-Scroll：无缝集成的滚动优化库 项目地址:https://gitcode.com/oblador/angular-scroll 项目介绍 Angular-Scroll是一款小巧而强大的AngularJS插件，专注于提供平滑的滚动体验。该库无需依赖jQuery，最小化版本仅8KB，压缩后更是只有2KB，是实现高效滚动交互的理想选择。它包括一系列指令和API，使得在Angu...
vue封装滚动表格
Z_Gleng的博客
02-02 528
【代码】vue封装滚动表格。
Angular 实现列表自动滚动
SuperRich 的博客
04-30 2721
前言 实现新闻列表自动滚动，类似中奖名单那种滚动，目前 js 实现的方式还是有很多相关代码的，不过这里使用 Angular 实现，其实原理差不多，正好业务需要，在此记录下如何实现。 正文 实现思路： 1. 获取页面的元素操作其滚动条 2. 当滚动条距离底部还有 10 个像素内，需要将滚动列表再次追加 3. 当追加次数过多时，需要重新开始，防止页面卡顿（这也是体验不好的地方，如果有其他更好的方案欢迎...
angular 实现无缝滚动
talon9527的博客
04-18 1256
constructor( private api: ApiService, private renderer: Renderer2,//订阅angular这个服务 ) { } //页面向上滚动 offset() { let arr = this.emparr //数据数组 let dom: any = document.getElementsByClassName('tbody1')[0] //获取dom元素 let h = dom.off...
一个短小精悍的angular无限滚动列表组件无任何依赖
08-10
本项目“一个短小精悍的angular无限滚动列表组件无任何依赖”恰好满足了这一需求，且无需额外的库或插件支持，实现了轻量级的解决方案。 该组件的核心思想是监听用户的滚动事件，当滚动到底部时触发加载新数据的...
Angular8 实现table表格表头固定效果
01-21
最近项目中有个需求，表头固定，内部实现滚动条。除了单个表头，还有多个表头的情况（下一篇中介绍）。 效果图： html 结构 按区域划分可以分为三个大部分，一共是通过4个table 组合成一个整体的table。 然后通过 ...
ngx-ui-scroll：Angular的无限虚拟滚动
02-01
在有限的视口上进行无限的双向滚动。 框架的指令。 用构建。 受启发（AngularJS，自2013年起）。 可以在上获得演示。 可以捐赠吗？ 去 :backhand_index_pointing_right: 改善开源世界 动机 滚动大型数据集可能会...
angular-infinite-scroll:一个简单的 AngularJS 无限滚动解决方案
06-21
角度无限滚动 一个简单的无限滚动解决方案，用于 AngularJS 权重 < 1>=v1.2.0 （应该使用） jQuery（至少） >=v.1.7 （未来计划移除） 安装 angular-infinite-scroll在 [ Bower ] 上可用： $ bower install ...
angular-scrollto, 使用选择器滚动到元素的Angular 指令.zip
09-18
angular-scrollto, 使用选择器滚动到元素的Angular 指令 角 scrollto使用选择器滚动到元素的Angular 指令。需要jQuery很快，就会有一个非jQuery版本。安装Bowerbower install angular-scrollto --saveNPM
angular-scroll-events：滚动事件的Angular指令
02-06
滚动事件的Angular指令 实用程序库添加了对scroll-up和scroll-down事件的支持 安装 使用npm或yarn安装'g1b.angular-scroll-events' npm install angular-scroll-events 要么： yarn add angular-scroll-events 将'g1b.scroll-events'模块添加到您的应用程序配置中 angular . module ( 'myApp' , [ 'g1b.scroll-events' , ... ] ) 在视图中使用“向上滚动”和/或“向下滚动”指令 < div scro
Angular创建组件 声明属性的几种方式、ts定义属性、绑定数据、绑定属性、绑定html、数据循环、循环多维数组
03-05
Angular创建组件 声明属性的几种方式、ts定义属性、绑定数据、绑定属性、绑定html、数据循环、循环多维数组
Angular4实现鼠标悬停3d倾斜效果
08-29
在本文中，我们将探讨如何在 Angular4 中实现一个鼠标悬停时产生3D倾斜效果的功能，这在某些交互设计中非常常见，例如锤子科技官网的效果。实现这样的效果需要对 Angular 的指令系统有一定的理解。 首先，我们要...
angular 每秒循环
邪人君子的博客
07-18 404
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> <body> <div ng-app="myApp" ng-...
angular4.x 数据循环
qq_37201926的博客
11-28 824
数据循环 *ngFor 普通循环 eg: *ngFor="let item of listArray" template 循环数据  eg：template="ngFor let item of listArray" home.component.ts public:list=[]; public:list3:any[]; constructor(){ this.list=['数学','...
几种 angular 循环。。。。
热门推荐
carlkane的博客
04-13 1万+
学习angular 有好一段时间， 之前有项目接触到这玩意，那就从基础学起，记录下学习过程中的点点滴滴把。。。。 angular js的循环 1. 第一种也是我们最常见的， 给出一个数组或者数组对象将其打印出来。   使用 ng-repeat 来循环数组             {{ x }}       2. 第二种在项目中学习到的 obj.id as
angular div 滚动条事件_angular操作DOM中的滚动条 自动滚动到底部示例
weixin_30921875的博客
01-26 792
一般情况下我们angular项目中很少对DOM进行操作的，但偶尔根据需求也会对元素进行操作；下面看看在angular中如何获取DOM元素内容。angular操作DOM中的滚动条场景：模拟一个聊天窗口，发送信息后，滚动条自动滑动到最底部(如图所示)。我们就可以借助angular中ElementRef类进行DOM操作。angular操作DOM元素 - ElementRef根据UI设计显示，信息内容布局...
angular监听鼠标移入移出
06-09
在Angular中，你可以使用`@HostListener`装饰器来监听鼠标移入和移出事件。具体的实现步骤如下： 1. 在组件类中导入`HostListener`装饰器： ``` import { Component, HostListener } from '@angular/core'; ``` 2. 在组件类中定义鼠标移入和移出事件的处理函数： ``` @Component({ selector: 'app-example', templateUrl: './example.component.html', styleUrls: ['./example.component.css'] }) export class ExampleComponent { onMouseEnter() { console.log('鼠标移入了！'); } onMouseLeave() { console.log('鼠标移出了！'); } } ``` 3. 使用`@HostListener`装饰器来监听鼠标移入和移出事件： ``` @HostListener('mouseenter') onMouseEnter() { console.log('鼠标移入了！'); } @HostListener('mouseleave') onMouseLeave() { console.log('鼠标移出了！'); } ``` 这样，当鼠标移入和移出组件时，对应的处理函数就会被调用。你可以根据具体需求，在处理函数中实现相应的逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值