zoukankan      html  css  js  c++  java
  • Angular虚拟滚动使用方法小结

    Angular虚拟滚动的使用:

    使用的Angular版本:Angular11

    前置条件:已安装 @angular/cdk

    使用方法:在module.ts中引入ScrollingModule

    import { ScrollingModule } from "@angular/cdk/scrolling";

    然后在模板文件.html中使用cdk-virtual-scroll-viewport,必需属性是itemSize,即可视窗口中显示的条目数量,并且条目的渲染不使用*ngFor,更换为*cdkVirtualFor,构造一个简单例子示意:

    <cdk-virtual-scroll-viewport [itemSize]="20" style="height: 400px;">
      <div *cdkVirtualFor="let exam of exams" style="height: 30px;">
        {{exam}}
      </div>
    </cdk-virtual-scroll-viewport>

    实际效果如下,例子中1000条数据,实际渲染数量略大于设置的条目数:

    在需要前端页面渲染大量节点的时候,有时会造成卡顿,此时虚拟滚动不失为一种选择。

  • 相关阅读:
    使用git管理github项目
    router 跳转页面
    JS中[object object]怎么取值
    微信授权获取code
    闭包
    css属性clear
    javaScript循环
    css属性position
    跨域
    浅析JS内存 一
  • 原文地址:https://www.cnblogs.com/csfeng/p/15251266.html
Copyright © 2011-2022 走看看