amp-html - 具有动态高度的放大器列表

Question

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

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

所有可用的布局都需要 amp-list 级别或父级别的维度。但是我不想指定高度。我的结果可以有 1 或 12 项。

Answer 1

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

你可以做以下三件事来支持这一点:

使用具有足够高度的固定高度布局以包含第一个元素。这样可以确保列表在只有一个元素的情况下不会占用太多空间。

指定一个溢出按钮以防列表折叠。

通过将列表放置在初始视口(viewport)下方或尽可能靠近底部，启用 amp-runtime 为列表提供更多空间。

以下是官方文档对此的评价:

If amp-list needs more space after loading it requests the AMP runtime to update its height using the normal AMP flow. If AMP Runtime cannot satisfy the request for new height, it will display overflow element when available. Notice however, the typical placement of amp-list elements at the bottom of the document almost always guarantees that AMP Runtime can resize it.

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