介绍
Angular2-Virtual-Scroll是一个用于优化大量数据的Angular 2应用程序的npm包。它的主要功能是在UI中重复使用一小部分视图，从而减少页面的渲染次数。这个包可以帮助前端开发者在大数据量的情况下提高页面的性能和速度。
安装
在安装Angular2-Virtual-Scroll之前，需要先安装Angular。可以使用命令行工具安装：
npm install -g angular-cli ng new my-app
然后在新项目的根目录下运行以下命令：
npm install angular2-virtual-scroll --save
使用
安装之后，可以在Angular组件中导入Angular2-Virtual-Scroll：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- --------------------------
------------
--------- -----------
--------- -
-----
---------------
---------------
----------------------- - --------
---- ----------- ---- -- -----------------------------
-----------------
------
--
---------- -----------------------
--
------ ----- ------------ -
----- - ------------------- ---------------- -- -- ----- --------
-------------- ----
-在这个示例中，我们使用了一个无限滚动的列表组件，可以轻松处理大量数据。有两个变量被定义。items是一个包含大量数据的数组。viewPortItems是一个只包含当前视图中的数据的数组。
API
属性
items: 输入，数据数组parentScroll：输入 ，当列表在具有 scrollTop 和 scrollHeight 属性的父容器中时应该设置此值。bufferAmount：输入 ，缓冲数量 （default:10）。把这个值设的大一些可以提高更快的选择体验, 但是这会增加DOM更新的数量。scrollAnimationTime：输入 ，滚动动画时间，以毫秒为单位（default:250）。当使用键盘或鼠标滚轮时，滚动到新项目所需的时间。downArrow: 输入 ，向下箭头内容 (default:"▼")upArrow：输入 ，向上箭头内容 (default:"▲")disabled：输入 ，是否禁用（true/false）scrollbarWidth:只读 ，计算滚动条宽度（如果当前系统允许显示滚动条）
事件
update：当新视图项被计算并准备为视图时，发出此事件。end: 当滚动到底部时发出此事件。
示例
在这里我们创建了一个简单的虚拟滚动表格，用于展示大量的表格行。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- --------------------------
--------- -------- -
--- -------
---------- -------
--------- -------
---- ------
-
------------
--------- -----------
--------- -
-------
-------
-----------
--------- ---------
-------- ---------
------------
--------
---------------
------------------
--------------
----------------------- - --------
-------
--- ----------- --- -- ---------------
-------------------
--------------------------
-------------------------
--------------------
-----
--------
-----------------
--------
--
------- --
----- -
------ -----
------- --- ----- ------
---------------- ---------
-
--- -- -
-------- ----
------- --- ----- ------
-
--
--
------ ----- ------------ -
----- ---------- - ---
-------------- ----
------------- -
--- ---- - - -- - - ------- ---- -
----------------
--- --
---------- ------ ---- -------
--------- ----- ---- -------
---- ------------------------ - ----
---
-
-
-结论
在现代前端应用程序中，数据量越来越大。Angular2-Virtual-Scroll是一个非常有用的工具，可以帮助我们在处理大量数据时轻松实现更快的页面渲染和更好的性能。本篇文章详细介绍了如何安装和使用这个优秀的npm包，示例代码也可以通过本文进行参考。希望本篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/96619