在前端开发中，需要展示大量数据时，很多时候会用到列表的展示方式。@polymer/iron-list 是一个 Polymer 中的列表组件，提供了高性能滚动，并可自动回收 DOM 节点等特性，减少了大量数据展示时的性能问题。
在这篇文章中，我们将学习如何使用 @polymer/iron-list，从而在前端开发中展示高效的列表数据。
安装依赖
如果你已经使用过 Polymer，那么安装 @polymer/iron-list 会非常简单。如果你是新手，请先安装 Polymer CLI：
npm install -g polymer-cli
然后，在 Polymer 项目中安装依赖：
npm install --save @polymer/iron-list
创建组件
在 Polymer 中，我们需要创建一个组件来使用 @polymer/iron-list。首先，在你的项目中创建一个名为 my-list 的组件：
-- -------------------- ---- -------
----------- -------------
----------
---------- ------------------
----------
------------------------
-----------
------------
-----------
-------------在这个组件中，我们使用了 iron-list 和 iron-list 的子组件 template。 items 是一个数组，包含要显示的所有数据。在 template 中，我们使用 [[item.name]] 语法将数据绑定到 DOM 中。
设置数据
现在我们需要在 my-list 组件中设置 items 数组，来告诉 iron-list 要显示哪些数据。可以在组件中使用以下代码来设置数据：
-- -------------------- ---- -------
------ --- ------------ -
------ -
------ -
----- ------
------ ---------- -
------ -
- ----- ------- --
- ----- -------- --
- ----- -------- --
- ----- -------- --
- ----- ---------- --
--
-
-
--
-在这个例子中，我们将 five 个对象放入 items 数组中，每个对象都有一个 name 属性用于展示数据。
配置 iron-list
接下来，我们需要对 iron-list 进行一些配置，以便于满足我们的需要。以下是一些常用的配置：
grid：是否启用网格布局items：要显示的数据as：指定迭代器变量名，默认为itemscroll-target：滚动区域的目标元素。如果未设置，则默认为window元素scroll-threshold：滚动触发器的阈值，默认为 0。数字表示像素数。scroll-offset：滚动触发器偏移量，默认为开始时的屏幕高度的一半。scroll-into-view：指定滚动目标视图的选项，auto时，如果设置了scroll-target，则滚动到区域内；否则，滚动到列表末尾
在这个例子中，我们需要启用网格布局并设置滚动目标为 window。我们可以使用以下代码进行配置：
<iron-list grid items="[[items]]" height="300" as="fruit" scroll-target="window">
<template>
<div>[[fruit.name]]</div>
</template>
</iron-list>在这个例子中，我们还设置了 height 属性，指定了 iron-list 的高度，以便为其提供一个可滚动区域。 as="fruit" 表示我们使用 fruit 作为迭代器变量。在 template 中，我们使用 [[fruit.name]] 将数据绑定到 DOM。
示例代码
在这里是完整的可以使用的代码，让你更好的理解 @polymer/iron-list
-- -------------------- ---- -------
----------- -------------
----------
-------
----- -
-------- ------
-------- -----
-
--------
---------- ---- ----------------- ------------ ---------- -----------------------
----------
-------------------------
-----------
------------
-----------
-------------
--------
----- ------ ------- --------------- -
------ --- ------------ -
------ -
------ -
----- ------
------ ---------- -
------ -
- ----- ------- --
- ----- -------- --
- ----- -------- --
- ----- -------- --
- ----- ---------- --
--
-
-
--
-
-
-------------------------------- --------
---------结论
@polymer/iron-list 是一个性能良好的 Polymer 列表组件，适用于需要展示大量数据的情况下。我们只需要按照上述步骤来安装依赖、创建组件并设置数据，就能轻松构建出简单高效的列表。希望本文对你有所帮助，通过学习 @polymer/iron-list，让你在前端开发中展示列表更加平滑和快速。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7580cba9b7065299ccbccd