动态高度的放大器清单

Question

我使用的是放大器清单，我想根据得到的结果得出一个动态的高度。有办法吗？我做不到。

<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运行时，可以通过将列表放置在初始视口以下或尽可能远的底部，为列表提供更多空间。

这是官方文档对此的评价：

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

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