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

2024-01-07

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

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

所有可用的布局都需要放大器列表级别或父级别的尺寸。但是我不想指定高度。我的结果可以有 1 个或 12 个项目。


AMP 中没有动态布局(这是为了避免页面加载时的回流,这是 AMP 的一大优势)。但是,如果需要(且可用),放大器列表将自动占用更多空间。

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

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

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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

具有动态高度的放大器列表 的相关文章

随机推荐