AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

提升互动性

入门代码提供了一个相当基础的用户体验。我们可以通过几种方式来改进它

  • 添加一个指示器，显示当前幻灯片和幻灯片总数。
  • 当用户选择不同的衬衫颜色时，更改图像轮播以显示所选颜色的衬衫图像。

在引入 amp-bind 组件之前，添加这些功能是不可能的。让我们亲身体验 amp-bind，并将这些新功能添加到我们的示例代码中！

安装 amp-bind 组件

amp-bind 是一个 AMP 组件，它通过数据绑定和类似 JS 的表达式提供自定义的交互性。要使用 amp-bind，您必须在页面中安装它。

打开 static/index.html 文件，并将以下脚本添加到页面 <head> 部分的 AMP 组件列表中

<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 中。

初始化幻灯片状态

让我们初始化一个状态变量，以跟踪图像轮播中当前显示的幻灯片的索引。打开 static/index.html，并将以下代码添加到页面的 <body> 顶部（在 <header> 之前）

<amp-state id="selected">
  <script type="application/json">
    {
      "slide": 0
    }
  </script>
</amp-state>

可以通过其关联的 ID 访问 <amp-state> 元素中的数据。例如，我们可以通过以下表达式片段引用此变量

selected.slide // Evaluates to 0.

更新幻灯片状态

接下来，当用户在轮播上更改幻灯片时，让我们通过将以下 "on" 操作添加到现有的 amp-carousel 元素来更新此变量

<amp-carousel type="slides" layout="fixed-height" height=250 id="carousel"
    on="slideChange:AMP.setState({selected: {slide: event.index}})">

现在，每当 amp-carousel 的显示幻灯片发生更改时，将使用以下参数调用操作 AMP.setState

{
  selected: {
    slide: event.index
  }
}

event.index 表达式计算为新的幻灯片索引，AMP.setState() 操作将此对象文字合并到当前状态中。这将用 event.index 的值替换 selected.slide 的当前值。

提示 – AMP.setState() 对嵌套对象文字执行深度合并。有关更多详细信息，请参阅 amp-bind 文档。

绑定指示器元素

接下来，让我们利用这个跟踪当前显示幻灯片的状态变量，创建一个幻灯片指示器。找到幻灯片指示器元素（查找 <!-- TODO: "Add a slide indicator" -->），并将以下绑定添加到其子元素

<!-- TODO: "Add a slide indicator" -->
<p class="dots">
  <!-- The <span> element corresponding to the current displayed slide
       will have the 'current' CSS class. -->
  <span [class]="selected.slide == 0 ? 'current' : ''" class="current"></span>
  <span [class]="selected.slide == 1 ? 'current' : ''"></span>
  <span [class]="selected.slide == 2 ? 'current' : ''"></span>
</p>

[class] 是一个更改 class 属性的绑定，您可以使用它来添加或删除任何元素的 CSS 类。

试用一下：刷新页面并更改幻灯片！

通过更改轮播上的幻灯片，它

  1. 触发 slideChange 事件 ...
  2. 调用 AMP.setState 操作 ...
  3. 更新状态变量 selected.slide ...
  4. 更新指示器 <span> 元素上的 [class] 绑定！

好！现在我们有了一个工作的幻灯片指示器。

看看您是否可以添加功能，以便当用户点击幻灯片的指示器点时，它会使用所选项目更新图像轮播。提示一下，在 amp-carousel 上使用 tap 事件和 [slide] 绑定。

如果我们可以在更改所选颜色时看到不同衬衫颜色的图像，那就太好了。使用 amp-bind，我们可以通过绑定 amp-carousel 中的 amp-img 元素上的 [src] 来实现这一点。

初始化 SKU 状态

首先，我们需要使用每个颜色衬衫的图像源 URL 初始化状态数据。让我们使用新的 <amp-state> 元素来完成此操作

<!-- Available shirts. Maps unique string identifier to color and image URL string. -->
<amp-state id="shirts">
  <script type="application/json">
    {
      "1001": {
        "color": "black",
        "image": "./shirts/black.jpg"
      },
      "1002": {
        "color": "blue",
        "image": "./shirts/blue.jpg"
      },
      "1010": {
        "color": "brown",
        "image": "./shirts/brown.jpg"
      },
      "1014": {
        "color": "dark green",
        "image": "./shirts/dark-green.jpg"
      },
      "1015": {
        "color": "gray",
        "image": "./shirts/gray.jpg"
      },
      "1016": {
        "color": "light gray",
        "image": "./shirts/light-gray.jpg"
      },
      "1021": {
        "color": "navy",
        "image": "./shirts/navy.jpg"
      },
      "1030": {
        "color": "wine",
        "image": "./shirts/wine.jpg"
      }
    }
  </script>
</amp-state>

这个 <amp-state> 元素包含一个 JSON 对象，该对象将衬衫标识符字符串（即 SKU）映射到相应衬衫的颜色和图像 URL。JSON 数组也可以在这里使用，但是使用对象可以让我们做一些更酷的事情，您很快就会看到。

现在，我们可以通过衬衫的标识符访问图像 URL。例如，shirts['10014'].color 计算为 "dark green"，shirts['10030'].image 返回 "wine" 衬衫颜色的图像 URL。

跟踪选定的 SKU

如果我们添加另一个跟踪所选 SKU 的状态变量，我们可以将表达式绑定到 amp-img 元素，以便在所选 SKU 更改时更新它们的 src 属性。将新的 sku 键添加到现有 amp-state#selected 元素的 JSON 中

<amp-state id="selected">
  <script type="application/json">
    {
      "slide": 0,
      "sku": "1001"
    }
  </script>
</amp-state>

更新 SKU 状态

向 amp-selector 添加一个 “on” 操作，以便在选择新颜色时更新 selected.sku 变量

<amp-selector name="color"
    on="select:AMP.setState({selected: {sku: event.targetOption}})">

提示 – 这也可以通过将 on="tap:AMP.setState(...) 操作添加到 amp-selector 内的每个 amp-img 子元素来实现。关于 amp-selector 的一个很棒的地方是它可以简化像这样的标记方式。

绑定图像元素

然后，将绑定添加到 amp-img

<!-- Update the `src` of each <amp-img> when the `selected.sku` variable changes. -->
<amp-img width=200 height=250 src="./shirts/black.jpg"
    [src]="shirts[selected.sku].image"></amp-img>
<amp-img width=300 height=375 src="./shirts/black.jpg"
    [src]="shirts[selected.sku].image"></amp-img>
<amp-img width=400 height=500 src="./shirts/black.jpg"
    [src]="shirts[selected.sku].image"></amp-img>

注意 – 实际上，轮播中的每个图像都可能具有不同的 src。可以通过将单个图像替换为图像数组来完成此操作。为了简单起见，本教程使用不同放大倍率的单个图像。

试用一下：刷新页面，并为衬衫选择不同的颜色。当您这样做时，轮播的图像会更新以显示所选颜色的衬衫。

上一章 下一章