npm 包 @npm-polymer/iron-list 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

@npm-polymer/iron-list 是一个能够显示大量数据的 Polymer 元素集合，它的设计灵感来自于两个 Web 组件：HTML5 的 <input type="range">```` 和 Polymer 的 <template>````。

使用 @npm-polymer/iron-list，开发者可以在其上方快速有效地展现成百上千条数据，同时支持对数据的渲染、过滤、排序等操作。

在本篇文章中，我们将详细解释如何使用此 npm 包进行前端开发，并提供一些示例代码和指导意义。

安装和使用

安装

在使用 @npm-polymer/iron-list 之前，首先需要通过 npm 进行安装。在控制台中输入以下命令，即可完成安装：

npm install --save @npm-polymer/iron-list

使用

安装完成之后，可以在页面中引入该 npm 包的模块：

<iron-list items="[1, 2, 3]">
  <template>
    <div>[[item]]</div>
  </template>
</iron-list>

这样即可在页面中展现一个具有三个数字的列表。

API

属性

items: Array<Object>；列表数据；
as: String；数据项名称（默认为item）；
selected-as: String；选择数据项名称；
selected-items: Array<Object>；选择数据项集合；
selected-item: Object；当前选中的数据项；
multi-selection: Boolean；是否允许多选，默认为false；
scroll-target: Object；列表可滚动区域；
scroll-target-selector: String；列表可滚动区域选择器；
scroll-threshold: Number；滚动阈值，表示当滚动距离超过列表总高度的百分之多少时会触发事件；
scroll-thresholds: Object；滚动阈值一览表，这个对象包含了已经添加的阈值及其回调函数；
scroll-offset: Number；滚动位置偏移量；
first-visible-index: Number；可见列表中的第一项的索引；
last-visible-index: Number；可见列表中的最后一项的索引；
load-more-callback: Function；当滚动到预设阈值时触发的回调函数。

方法

scrollToIndex(index)：将列表滚动到指定的索引位置；
scrollToItem(item)：将列表滚动到指定的数据项位置；
isIndexVisible(index)：判断指定的索引位置的项当前是否可见；
toggleSelectionForIndex(index)：反选指定的索引位置的项。

示例代码

基础示例

<iron-list items="[1, 2, 3]">
  <template>
    <div>[[item]]</div>
  </template>
</iron-list>

多选示例

<iron-list items="{{items}}" multi-selection>
  <template>
    <div on-tap="toggleSelection">[[item.text]]</div>
  </template>
</iron-list>

toggleSelection: function(e) {
  var item = e.model.get('item');
  this.$.list.selectIndex(this.$.list.indexOf(item));
}

滚动加载示例

<iron-list id="list" scroll-threshold="0.9" items="{{items}}"
      load-more-callback="loadMoreData">
  <template>
    <div>[[item]]</div>
  </template>
</iron-list>

loadMoreData: function() {
  // AJAX 请求数据
  // ...
  // 更新列表数据
  this.items.push(newData);
}

结论

@npm-polymer/iron-list 是一个非常实用的 Polymer 组件，可以帮助开发者高效地展示大量数据。本文介绍了该 npm 包的安装与使用，以及其丰富的 API。例如多选和滚动加载功能，这些功能可以使列表更加灵活和高效，方便了开发者的工作。

总而言之，在前端开发中，如果需要展示大量数据，那么我们强烈推荐使用 @npm-polymer/iron-list 这个 npm 包。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055ff181e8991b448ddb34