AMP的动作和事件(AMP页面交互组件)

AMP 包含交互式用户体验。但是,为了保证性能和用户体验,它与非 AMP 页面的做法略有不同。

AMP 使用该on属性在元素上安装事件处理程序。与属性一样,一些事件和动作对公共元素可用,而另一些对某些组件是特殊的。对于我们的第一页,我们将注册一个基本事件,即用户的点击,然后以隐藏操作响应。

AMP的动作和事件 (AMP页面交互组件)

向您的页面添加一个按钮,并为其赋予on属性:

<button on="">
    Goodbye AMPHTML World!
</button>

我们将在属性值中定义的第一件事on是我们正在侦听的事件。对于用户通过鼠标在桌面或移动触摸上的点击,AMP 使用事件类型tap

<button on="tap">

然后,我们添加一个冒号字符,然后定义id我们希望我们的操作对其产生影响的目标。我们将隐藏我们的<h1 id="hello">元素,所以让我们在冒号字符后添加“hello”。

<button on="tap:hello">

最后,我们添加一个句点,然后定义动作。在这种情况下,它是hide.

<button on="tap:hello.hide">

现在,如果我们点击我们的按钮,<h1>元素就会被隐藏!

交互选项

阅读操作和事件以及我们的交互指南,了解有关 AMP 中可用的交互类型以及如何实现它们的更多详细信息。此外,AMP 通过<amp-script>组件包含自定义 JavaScript。阅读在 AMP 页面中使用自定义 JavaScript指南并按照使用自定义 JavaScript创建 UI 小部件开始操作。

AMP的动作和事件(AMP页面交互组件)

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注