Question

我的目的是：点击第一张图片后，图片的描述将从顶部打开。单击下一个图像时，将打开第二个图像的描述，并隐藏第一个图像的描述。我怎么能用amp ??

做到这一点

Answer 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>

一种可能的优化方法是将图像包装在放大器选择器元素中，然后让放大器选择器更新imageId。

用户交互后的AMP动态内容

1 个答案: