如何使聚合物铁单不断膨胀，而不是一团糟

Question

我正在学习collapsible items of iron-list的例子。然而，我有更多的内容在铁的列表下，比如说铁的菜单。

问题是铁列表的高度不会随着用户扩展铁列表内容而动态增加。取而代之的是，铁质列表变得可收集，使得很难看到所有的内容。

我想要扩大铁列表的高度，并向下按下的内容(铁菜单)。有没有办法做到这一点？非常感谢。

我也尝试设置了scroll-target，但它不会将下面的内容向下推。它将铁质列表内容重叠到下面的内容上，这不是我想要的。

<iron-list scroll-target="document" ... >

Answer 1

我终于找到了解决方案。正如您在the example中看到的那样，函数getClassForItem()将div类更改为控制显示/隐藏。因此，我们可以一起触发调整大小事件。

    getClassForItem: function(item, selected) {
      this.querySelector('iron-list').fire('iron-resize'); // added line
      return selected ? 'item expanded' : 'item';
    }

Answer 2

必须显式设置iron-list的大小，如“调整iron-list”下的iron-list项目ReadMe中所述。

因此，您可以使用javascript根据其他条件更改高度。

另一种把某些东西放在铁列表下面的方法是计算你是否在最后一个列表项上，然后添加一个自定义的行(即分页)，如here所示

但是，如果没有大型数据集，可以使用dom-repeat，它会将节点添加到DOM中，因此可以扩展列表。