amp-live-list
简介
amp-live-list 组件添加了对将实时更新发布到 AMP 页面的支持，以便在源文档中提供新内容。这对于实现实时博客非常有用。在此处查找实时博客的示例here。
换句话说，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 上编辑示例