2

我正在尝试轮播一次显示三个图像（type =“carousel”），其中每个图像代表一个类别，用户可以单击轮播中的图像以加载/显示附加信息（文本和图像）轮播下方的那个类别。从我最初对文档的探索中，我找不到这样的例子。似乎这对于 type="carousel" 是不可能的。如果对此有任何确认，或者我在这里的假设有误，将不胜感激。

解决方法：我确实发现如果我使用 type="slides" 代替（轮播一次显示一个图像）和 AMP-Bind 组件，我可以使用“on”事件来更改/更新电子邮件中其他地方的内容每次上一个/下一个按钮被按下。不是完美的，而是原始想法的合理替代方法。

<amp-carousel
   type="slides"
   on="slideChange:AMP.setState({ currentAdventure: event.index} )">

amp-bind 的 Amp for Email 文档页面显示了将 [src] 绑定到 amp-img 以更改图像源路径的示例（一个稍微复杂的示例）：

<amp-state id="myAnimals">
  <script type="application/json">
    {
      "dog": {
        "imageUrl": "/img/dog.jpg",
        "style": "greenBackground"
      }
...
    }
  </script>
</amp-state>

<amp-img width="300" height="200" src="/img/dog.jpg"
    [src]="myAnimals[currentAnimal].imageUrl">
</amp-img>

AMP FOR EMAIL PLAYGROUND：到目前为止，我认为一切都很好。看来我可以更新文本和图像源路径。虽然我可以更新文本，但 Amp For Email 验证器在 amp-img 标签中标记了 [src] 的使用，因此无法更改图像。:-(

我猜这可能是出于安全原因在之后的某个时间实施的。

解决方案？是否有另一种方法来更新图像源路径，或者这在任何情况下都是不允许的？AMP-list 是一种可能的解决方案吗？如果是这样，不确定如何使用下面的代码片段来实现（Jason、Carousel 和要更新的内容块）

对于如此冗长的解释，我深表歉意，并感谢任何见解。感谢您分享您的时间和知识。

<amp-state id="myState">
  <script type="application/json">
    {
      "adventure": [
         {
          "name": "Category 1 copy...",
          "description": "Trip 1 | Trip 2 | Trip 3 | Trip 4,
          "image": "https://preview.amp.dev/static/inline-examples/images/image1.jpg"
        },
        {
          "name": "Category 2 copy...",
          "description": "Trip 5 | Trip 6 | Trip 7 | Trip 8",
          "image": "https://preview.amp.dev/static/inline-examples/images/image2.jpg"
        },
        {
          "name": "Category 3 copy...",
          "description": "Trip 9 | Trip 10 | Trip 11 | Trip 12",
          "image": "https://preview.amp.dev/static/inline-examples/images/image3.jpg"
        }
      ]
    }
  </script>
</amp-state>



<amp-carousel
    width="543"
    height="150"
    type="slides"
    on="slideChange:AMP.setState({ currentAdventure: event.index} )">

    <amp-img src="https://preview.amp.dev/static/inline-examples/images/image1.jpg" 
        width="175"
        height="150"></amp-img>
    ....

</amp-carousel>



<div class="center">
<h1>
<span [text]="myState.adventure[currentAdventure].name">Category 1 copy..."</span>
</h1>
<p class="center" [text]="myState.adventure[currentAdventure].description">Trip 1 | Trip 2 | Trip 3 | Trip 4</p>
<amp-img src="https://preview.amp.dev/static/inline-examples/images/image1.jpg" 
        width="175"
        height="150"
        [src]="myState.adventure[currentAdventure].image"></amp-img>
</div>
4

1 回答 1

1

AMP for Email 不支持绑定到[src]or （这在AMP for Email Supported Components[href]中提到）。

相反，您可以在这里做的只是为文档的每个幻灯片部分提供所有图像（和其他内容），然后使用[hidden]绑定隐藏与当前幻灯片无关的图像，如下所示：

<amp-state id="currentAdventure">
  <script type="application/json">
    0
  </script>
</amp-state>

<amp-carousel
  width="543"
  height="150"
  type="slides"
  on="slideChange:AMP.setState({ currentAdventure: event.index} )">

  <amp-img src="https://preview.amp.dev/static/inline-examples/images/image1.jpg" 
    width="175"
    height="150"></amp-img>

  ....

</amp-carousel>


<div class="center">
  <div [hidden]="currentAdventure != 0">
    <h1>
      <span>Category 1 copy..."</span>
    </h1>
    <p class="center">Trip 1 | Trip 2 | Trip 3 | Trip 4</p>
    <amp-img src="https://preview.amp.dev/static/inline-examples/images/image1.jpg" width="175" height="150"></amp-img>
  </div>
  <div hidden [hidden]="currentAdventure != 1">
    <h1>
      <span>Category 2 copy...</span>
    </h1>
    <p class="center">Trip 5 | Trip 6 | Trip 7 | Trip 8</p>
    <amp-img src="https://preview.amp.dev/static/inline-examples/images/image2.jpg" width="175" height="150"></amp-img>
  </div>
  <div hidden [hidden]="currentAdventure != 2">
    <h1>
      <span>Category 3 copy...</span>
    </h1>
    <p class="center">Trip 9 | Trip 10 | Trip 11 | Trip 12</p>
    <amp-img src="https://preview.amp.dev/static/inline-examples/images/image3.jpg" width="175" height="150"></amp-img>
  </div>
</div>

这样，您只需要将幻灯片索引保持在状态，并使用它来隐藏页面中不相关的部分。

于 2019-10-16T13:00:43.960 回答