具有动态高度的放大器列表 [英] amp-list with dynamic height

问题描述

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

I'm using amp-list and I would like to have a dynamic height based on the results that I got. There is a way to do it? I couldn't get it done.

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

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

All the available layouts requires dimensions at the amp-list level or parent level. However I don't want to specify an height. My results can either have 1 or 12 items.

推荐答案

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

There is no dynamic layout in AMP (this is to avoid reflow while the page is loading, which is one of the big advantages of AMP). However, the amp-list will automatically take more space if required (and available).

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

You can do the following three things to support this:

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

官方文档是这样说的:

如果 amp-list 在加载后需要更多空间，它会请求 AMP 运行时使用正常的 AMP 流更新其高度.如果 AMP Runtime 不能满足新高度的请求，它会在可用时显示溢出元素.但是请注意，amp-list 元素在文档底部的典型放置几乎总是保证 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/组件/放大器列表

这篇关于具有动态高度的放大器列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！