具有动态高度的amp-list

Question

我正在使用amp-list，我希望根据我得到的结果获得动态高度。有办法吗？我无法完成它。

<amp-list src="request-url">
    <template type="amp-mustache" id="amp-template-id">
    ...
    </template>
</amp-list>

所有可用的布局都需要放大器级别或父级别的维度。但是我不想指定高度。我的结果可能包含1或12个项目。

Answer 1

AMP中没有动态布局（这是为了避免在页面加载时重排，这是AMP的一大优势）。但是，如果需要（并且可用），放大器列表将自动占用更多空间。

您可以执行以下三项操作来支持此操作：

1. 使用具有足够高度的固定高度布局以包含第一个元素。这可以确保列表不会占用太多空间，以防只有一个元素。
2. 如果列表已折叠，请指定溢出按钮。
3. 通过将列表放在初始视口下方或尽可能远的底部，使amp-runtime能够为列表提供更多空间。

以下是官方文档对此的说法：

  

如果amp-list在加载后需要更多空间，请求AMP运行时使用正常AMP流更新其高度。如果AMP Runtime无法满足新高度的请求，它将在可用时显示溢出元素。但请注意，文档底部的amp-list元素的典型放置几乎总能保证AMP Runtime可以调整它的大小。

来源：https://www.ampproject.org/docs/reference/components/amp-list