聚合物铁列表仅加载 20 项答案

【问题标题】：polymer iron-list only loading 20 items聚合物铁列表仅加载 20 项
【发布时间】：2015-10-20 23:48:24
【问题描述】：

我有一个测试数组，我正在从 Iron-ajax 中检索大约 1000 个项目。我将该返回数组设置为我的自定义聚合物元素的 people 属性。 Iron-list 显示前 20 个结果，但当我向下滚动时，其余结果未加载。

<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/iron-list/iron-list.html">
<link rel="import" href="/bower_components/iron-flex-layout/classes/iron-flex-layout.html">

<dom-module id="people-list">
    <template>
        <iron-list items="[[people]]" as="item" class="flex">
            <template>
                <div style="background-color:white; min-height:50px;">[[item.city]]</div>
            </template>
        </iron-list>
        <iron-ajax 
            auto
            id="ajaxPeopleList"
            method="POST"
            url="/people/list"
            handle-as="json"
            last-response="{{people}}">
        </iron-ajax>
    </template>
    <script>
        Polymer({
            is: 'people-list',
            properties: {
                people: {
                    type: Array
                }
            }
        });
    </script>
</dom-module>

我认为这可能与屏幕/铁列表元素的高度有关，但我被卡住了，不知道如何继续。

如果我以像素为单位设置 iron-list 元素的高度，我可以让它加载所有项目。但我只想让它适合屏幕。文档使您看起来可以使用 iron-flex 布局并使用类 flex，这是我在示例代码中尝试做的，但没有效果。

【问题讨论】：

将您的代码与此处github.com/PolymerElements/iron-list/tree/master/demo 的演示代码进行比较。尝试将 Iron-list 中的 class="flex" 更改为 class="layout vertical"
改了，但没用

标签： ajax list polymer web-component

【解决方案1】：

这是因为没有触发iron-resize 事件来告诉iron-list 重绘项目。根据文档：

调整大小

iron-list 在通过iron-resize 事件接收到通知时布置项目。此事件由任何实现 IronResizableBehavior 的元素触发。

默认情况下，iron-pages、paper-tabs 或 paper-dialog 等元素会自动触发此事件。如果您手动隐藏列表（例如，您使用 display: none），您可能希望实现 IronResizableBehavior 或在列表再次可见后立即手动触发此事件。例如

document.querySelector('iron-list').fire('iron-resize');

我已将以下内容添加到您的代码中（这可能有点小技巧）并使其正常工作：

ready: function () {
  document.addEventListener("scroll", function () {
    // fire iron-resize event to trigger redraw of iron-list
    document.querySelector('iron-list').fire('iron-resize');
  });
}

【讨论】：

【解决方案2】：

本·托马斯是对的。您正在获取 json 元素，但它没有显示，因为需要重绘铁列表。由于我有同样的问题，我去了谷歌聚合物网站，找到了 THIS 代码示例。

简而言之，您的示例：

<script>
// Only execute after DOM and imports (in our case the json file) has been loaded
HTMLImports.whenReady(function() {
  Polymer({
     is: 'people-list',
     properties: {
         people: {
             type: Array
         }
     },
    attached: function() {
      // Use the top-level document element as scrolltarget
      this.$.list.scrollTarget = this.ownerDocument.documentElement;
    }
  });
});

【讨论】：