高度灵活的放大器清单

Question

我想提供一个列表，该列表将随文本框的输入而变化。该列表将提供该搜索查询的结果。我正在为此使用amp-list。

我希望列表高度可以调整为结果数（此处应使用flex-item即可）。但我希望列表的最大高度为例如500px，没有更多

这可能吗？非常感谢

Answer 1

动态尺寸调整目前正在研究中：请参阅GitHub上的this thread-尽管不确定在当前情况下是否适用。您是否可以提供代码或指向当前正在处理的内容的链接？

要通过滚动溢出来完成最大高度，请在amp-list周围放置一个容器div。像下面这样。

div#list-container {
  max-height: 500px;
  overflow: scroll;
}

<div id="list-container">
  <amp-list>
  </amp-list>
</div>

Answer 2

您可以使用amp-bind根据搜索结果的数量动态更新amp-list的高度：

<amp-list layout="fixed-height"
  height="0"
  src="/results"
  [src]="searchResults"
  [height]="searchResults.length < 5 ? 100 * searchResults.length : 500">
  <template type="amp-mustache">
    // search results
  </template>
</amp-list>

我假设单个搜索结果的高度为100px，并且结果包含在名为searchResults的安培状态变量中。

Here is a working sample演示了如何动态调整放大器清单的大小。