无法显示聚合物铁列表的所有项目答案

【问题标题】：Unable to display all items of Polymer iron-list无法显示聚合物铁列表的所有项目
【发布时间】：2017-07-06 05:52:00
【问题描述】：

我是第一次尝试 Polymer。

我在索引文件上有以下css：

 body {
        margin: 0;
        font-family: 'Roboto', 'Noto', sans-serif;
        line-height: 1.5;
        height: 100vh;
        background-color: #eeeeee;
      }

您可以看到高度已明确调整大小。

然后，我遇到了 Iron-list 问题的页面 CSS：

  :host {     
          padding: 10px;           
          display: flex;
          flex-direction: column;
          height: 100vh;
          @apply(--paper-font-common-base);
      }

      iron-list { 
       flex: 1 1 auto;                 
        --iron-list-items-container: {
          max-width: 800px;
          margin: auto;
          margin-top: 5px;
          margin-bottom: 60px;
          border-bottom: 1px solid #ddd;                    
      };
    }

您还可以看到，我正在尝试使用 flexbox 作为 Iron-list 的高度。

我有一个简单的 Iron-ajax 来填充列表。 JSON文件有81条记录。

<iron-ajax id="getVehiclesAjax"       
    url="../data/vehicles.json"
    handle-as="json"
    auto
    on-response="handleVehiclesResponse"
    on-error="handleVehiclesError"></iron-ajax>

列表也很简单：

 <iron-list id="list" scroll-target="document" items="[[vehicles]]" as="item" selection-enabled>
      <template>
        <div>
            <div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]">
                <div class="pad">
                    <div class="primary-text">[[item.modelo]]</div>
                    <div class="shortText">[[item.placa]]</div>
                    <div class="longText">[[item.chassi]]</div>
                </div>
            </div>
        </div>           
      </template>
    </iron-list>

预期结果

iron-list 应该渲染所有项目，毕竟大小是在父组件上显式设置的，并且列表上的滚动目标是定义到文档的。此外，该列表在 css 上有 flexbox 设置。

https://elements.polymer-project.org/elements/iron-list

实际结果

当我加载页面时，只呈现了 27 条记录，尽管列表高度的大小与其余未出现的元素相应地调整了大小。

我尝试添加一个按钮并将其命名为：this.$.list.fire('iron-resize'); 但它没有奏效。手动调整窗口大小也没有任何作用。

唯一有效的是从铁列表中删除此属性：滚动目标="文档"

但如果我删除它，铁列表会显示一个滚动条，文档会显示一个滚动条...

我该如何解决这个问题？我只想要一个滚动条（文档）并且始终呈现项目...

【问题讨论】：

那么不要将高度设置为 Iron-list 吗？如果您不设置高度，它将使用 1 个滚动条呈现您想要的所有项目 - 文档。因为我真的不明白你在尝试什么。也许你想多了。
我设法解决了这个问题，请参阅下面的答案。

标签： polymer polymer-1.0

【解决方案1】：

我设法修复它。挖掘代码，我发现了这个属性：

有滚动区域

... 在封装所有铁页的 app-header-layout 上。我删除了它，现在一切正常，滚动时呈现项目，并且只有一个滚动条（在所有者文档上）。

【讨论】：