调整

Question

我有一个测试数组，我正在从iron-ajax中检索大约1000个项目。我将返回数组设置为我的自定义聚合物元素的people属性。铁序列表显示前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-flex布局并使用类flex，这是我在我的示例代码中尝试做的，但它没有效果。

Answer 1

这是因为没有任何内容触发iron-resize事件以告诉iron-list重绘项目。根据文件：

调整

iron-list在通过iron-resize事件收到通知时列出项目。任何实现IronResizableBehavior的元素都会触发此事件。

默认情况下，iron-pages，paper-tabs或paper-dialog等元素会自动触发此事件。如果您手动隐藏列表（例如，您使用display：none），则可能需要实施IronResizableBehavior或在列表再次可见后立即手动触发此事件。 e.g。

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');
  });
}

Answer 2

本托马斯是对的。您正在获取json元素，但它没有显示，因为需要重新绘制铁列表。由于我遇到了同样的问题，我去了google polymers网站并找到了 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;
    }
  });
});

聚合物铁列表仅装载20项

2 个答案:

调整