无法显示 Polymer iron-list 的所有项目

Question

我是第一次尝试 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 的高度。

我有一个简单的熨斗-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应该渲染所有item，毕竟size是在父组件上明确确定的，list上的scrolltarget是定义到document上的。此外，该列表在 css.

上具有 flexbox 设置

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

实际结果

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

我尝试添加一个按钮并调用它：this.$.list.fire('iron-resize'); 但它没有用。手动调整 window 的大小也没有任何作用。

唯一有效的方法是从 iron-list 中删除此属性：滚动目标="document"

但是如果我删除它，则会有一个显示铁列表的滚动条，以及一个显示文档的滚动条...

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

Answer 1

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

has-scrolling-region

...在封装所有 iron-pages 的 app-header-layout 上。我删除了它，现在一切都按预期工作，滚动时呈现项目，只有一个滚动条（在所有者文档上）。

无法显示 Polymer iron-list 的所有项目

Unable to display all items of Polymer iron-list

polymer

polymer-1.0