Question

我第一次尝试使用Polymer。

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

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

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

然后，页面的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用于铁列表的高度。

我有一个简单的铁ajax填充列表。 Theres 81记录了JSON文件。

<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>

预期结果

铁列表应该渲染所有项目，毕竟，大小是在父组件上明确调整大小的，列表上的scrolltarget是定义到文档的。此外，该列表在css上具有flexbox设置。

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

实际结果

当我加载页面时，只渲染了27条记录，尽管列表高度的大小与其他未显示的元素相对应。

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

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

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

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

Answer 1

我设法解决了这个问题。挖掘代码，我发现了这个属性：

已经滚动区域

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

无法显示聚合物铁列表

1 个答案: