用户交互后的 AMP 动态内容答案

【问题标题】：AMP Dynamic content after User-Interaction用户交互后的 AMP 动态内容
【发布时间】：2018-03-09 14:01:42
【问题描述】：

我的目的是：当点击第一张图片时，图片的描述将从顶部打开。单击下一张图片时，将打开第二张图片的描述，并隐藏第一张图片的描述。我如何使用 amp 做到这一点？？

【问题讨论】：

【解决方案1】：

您可以使用amp-bind 将当前选择的图像绑定到它的描述，例如每次单击图像时设置变量imageId。根据图像 ID 隐藏描述。例如[hidden]="imageId!=3"。

这是一个工作版本：

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>amp-bind</title>
  <link rel="canonical" href="https://ampbyexample.com/components/amp-bind/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

</head>
<body>

  <p [hidden]="imageId>=1">
    Bio 1
  </p>
  <p hidden [hidden]="imageId!=2">
    Bio 2
  </p>
  <p hidden [hidden]="imageId!=3">
    Bio 3
  </p>
  <p hidden [hidden]="imageId!=4">
    Bio 4
  </p>

  <amp-img width=40 height=40 on="tap:AMP.setState({
                                    imageId: 1
                                    })" src=https://unsplash.it/40/40/image=10 tabindex=0>
  </amp-img>
  <amp-img width=40 height=40 on="tap:AMP.setState({
                                    imageId: 2
                                    })" src=https://unsplash.it/40/40/?image=11 tabindex=0>
  </amp-img>
  <amp-img width=40 height=40 on="tap:AMP.setState({
                                    imageId: 3
                                    })" src=https://unsplash.it/40/40/?image=12 tabindex=0>
  </amp-img>
  <amp-img width=40 height=40 on="tap:AMP.setState({
                                    imageId: 4
                                    })" src=https://unsplash.it/40/40/?image=13 tabindex=0>
  </amp-img>
</body>
</html>

一种可能的优化是将图像包装在 amp-selector 元素中，并让 amp-selector 更新 imageId。

【讨论】：