用户互动后的动态内容

简介

这是一个示例，展示了如何在用户互动后显示动态内容：产品可用性将基于产品选择进行显示。

设置

我们使用 amp-bind 来动态更新页面内容。

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

如何获取动态内容

通过使用 amp-bind 和带有 JSON 端点的 amp-state，用户可以在互动后获取最新的数据。由于 amp-bind 语句在页面加载时不进行评估，因此更新后的状态仅在用户互动后可用，这非常适用于特定产品可用性等用例。

请选择一个产品

<amp-state id="products" src="/static/samples/json/products.json"></amp-state>

<amp-img on="tap:AMP.setState({ productId: 0})" src="/static/samples/img/red_apple_1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<amp-img on="tap:AMP.setState({ productId: 1})" src="/static/samples/img/green_apple_1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<amp-img on="tap:AMP.setState({ productId: 2})" src="/static/samples/img/product1_alt1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<div [text]="products[productId] + ' available'">Please select a product</div>

需要进一步解释吗？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的具体用例。

转到 Stack Overflow

一个未解释的功能？

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

在 GitHub 上编辑示例

作者： @kul3r4