重要提示：此文档不适用于您当前选择的格式stories！

amp-action-macro

实验性

描述

创建可重用的操作。

必需的脚本

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

amp-action-macro 组件允许创建可重用的操作。

用法

amp-action-macro 创建您可以根据需要重复使用的 AMP 操作宏。每个操作宏都需要一个 id 和一个要 execute 的操作。您可以通过其 id 调用操作宏，并传递会改变其行为的参数。

示例

<amp-action-macro
  id="closeNavigations"
  execute="AMP.setState({nav1: 'close', nav2: 'close})"
></amp-action-macro>
<button on="tap:closeNavigations.execute()">Close all</button>
<div on="tap:closeNavigations.execute()">Close all</div>
<!--
  You can provide arguments in the macro.
-->
<amp-carousel id="carousel" ...>...</amp-carousel>

<amp-action-macro
  id="carousel-macro"
  execute="carousel.goToSlide(index=foo), carousel.goToSlide(index=bar)"
  arguments="foo, bar"
></amp-action-macro>
<button on="tap:carousel-macro.execute(foo=1, bar=2)">
  Go to slide 1 then 2
</button>

属性

id

用于唯一标识操作。此 id 在操作调用中引用。

execute

要调用的操作。此处允许任何有效的 AMP 操作。

<amp-action-macro
  id="navigate-action"
  execute="AMP.navigateTo(url='http://www.ampproject.org')"
></amp-action-macro>

<amp-action-macro
  id="refresh-amp-list"
  execute="ampList.refresh()"
></amp-action-macro>
<amp-list id="ampList" src="...">...</amp-list>

<button on="tap:navigate-action.execute()"></button>

<button on="tap:refresh-amp-list.execute()"></button>

arguments

用于定义可以在调用中使用的参数，并替换到 AMP 操作宏调用中。

需要更多帮助？

您已经阅读此文档十几次，但它并没有真正涵盖您的所有问题？也许其他人也有同样的感觉：在 Stack Overflow 上联系他们。

前往 Stack Overflow

发现错误或缺少功能？

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

前往 GitHub