amp-live-list

简介

amp-live-list 组件增加了对 AMP 页面发布实时更新的支持，当源文档中有新内容可用时，即可发布更新。这对于实现实时博客非常有用。在此处查找实时博客示例。

换句话说，AMP 运行时将轮询服务器以查找原始文档的更新，从而获取自身。服务器可以返回整个 AMP 页面或部分内容，并且运行时无缝地就地更新页面。

设置

在页眉中导入 amp-live-list 组件。

<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>

用户互动后更新：实时博客

使用 data-poll-interval 属性来指定 amp-live-list 组件轮询新数据的频率。最小间隔为 15 秒。使用 data-max-items-per-page 指定页面上显示的最大数量。有关所有属性的详细说明，请参阅 amp-live-list。

使用 on="tap:my-live-list.update" 从服务器加载最新更改。当 AMP 运行时发现新的文档更改时，将显示一个按钮。请注意，该按钮必须定义为 amp-live-list 的直接子项。

amp-live-list 必须包含 <div items> 下方的项目列表。每个项目都有一个特定的 ID，amp-live-list 将查找具有新 ID 的项目。

通过单击“您有更新”按钮，新内容将显示在演示列上（如果通过桌面访问演示，则为右侧的列）。代码列（如果通过桌面访问演示，则为中间的列）不会自行更新，但是如果要查看页面上的所有项目，请重新加载页面。

<amp-live-list layout="container" data-poll-interval="15000" data-max-items-per-page="5" id="amp-live-list-insert-blog">
  <button update on="tap:amp-live-list-insert-blog.update">You have updates</button>
  <div items>
  </div>
</amp-live-list>

amp-live-list 的内容是随机生成的（为了更容易和可重复的测试）。

自动更新

如果要更新现有列表项目而不进行用户交互，则需要通过 data-update-time 属性指定更新的执行时间。以下示例将显示并自动更新当前时间。这种方法非常适合显示实时比分或实时市场价值。

时间是：

<amp-live-list layout="container" data-poll-interval="15000" data-max-items-per-page="1" id="amp-live-list-update">
  <button update on="tap:amp-live-list-insert-blog.update">You have updates</button>
  <div items>
    <div id="time" data-sort-time="1234567" data-update-time="" class="time">
      The time is: <time></time>
    </div>
  </div>
</amp-live-list>

需要进一步的解释吗？

如果此页面上的说明未涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例