高度灵活的放大器列表

Question

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

我希望列表高度能够根据结果数进行调整（弹性项目在这里应该没问题）。但我希望列表的最大高度为例如500 像素，仅此而已

这可能吗？非常感谢

Answer 1

动态调整大小目前正在进行中：请参阅 GitHub 上的 this thread - 尽管不确定这是否适用于您当前的情况。您能否提供代码或 link 您当前正在处理的内容？

要通过滚动溢出来实现最大高度，请在 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>

我假设单个搜索结果的高度为 100 像素，并且该结果包含在名为 searchResults 的 amp-state 变量中。

Here is a working sample 演示如何动态调整放大器列表的大小。

高度灵活的放大器列表

amp-list with flexible height to a max

amp-html