Question

提前道歉-我认为这是一个小的错别字，因为我敢肯定我能做到这一点...

问题的简短版本：在下面的AMP HTML中，两个按钮均被渲染，但只有amp-list之外的一个按钮可以单击。

下面的问题的长版本，以防万一。

我正在尝试使用一些与时间相关的幻灯片来实现轮播。其中任意位置的幻灯片之一将与“现在”相关。

我希望用户能够单击一个按钮，将其带到代表“现在”的幻灯片上。

我从json端点获取与“现在”相关的相关轮播索引，然后打算在小胡子模板中设置按钮的ontap事件以转到相关幻灯片。

我要显示的按钮需要在amp列表中，因为这就是我检索json的方式，该json告诉我要指向哪个幻灯片索引。但是只有当我将按钮放置在放大器清单之外时，该按钮才能被单击。

我很确定这对我来说是愚蠢的，任何人都可以给我一些启示吗？

<!doctype html>
<html âš¡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">
    <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-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>

    <!-- this button is clickable, and the event is fired: -->      
    <button on="tap:carousel.goToSlide(index=1)" >Go to slide 1</button>


    <amp-list width="auto" height="200" src="<<JSON ENDPOINT>>">

    <!-- this button is not clickable so no event is fired: -->    
    <button on="tap:carousel.goToSlide(index=1)" >Go to slide 1</button>



    <template type="amp-mustache"> 
        <amp-carousel layout="fill" type="slides" id="carousel"  >
           <amp-fit-text width="100" height="500" >           carousel pos 1       </amp-fit-text>
           <amp-fit-text width="100" height="500" >           carousel pos 2       </amp-fit-text>
       </amp-carousel>
    </template>

    </amp-list>

</body>
</html>

Answer 1

我很讨厌滑块是静态的，因为amp-carousel不会在amp-list中呈现amp-img。

但是在放大器清单下可以单击按钮

Here is working url

Json Url渲染amp-list下的按钮：Click Here

代码：

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">
    <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-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>
<amp-list width="auto" height="200" src="https://jsonblob.com/api/6345e24e-803b-11e8-82fe-f3dd1274ef25">
 <template type="amp-mustache"> 
    <button on="tap:carousel.goToSlide(index={{index}})" >Go to slide {{position}}</button>
</template>
 </amp-list>
  <amp-carousel layout="responsive" height="200" width="500" type="slides" id="carousel">
      <amp-fit-text width="200"   height="200"   layout="responsive">Slider 1</amp-fit-text>
      <amp-fit-text width="200"   height="200"   layout="responsive">Slider 2</amp-fit-text>
<amp-fit-text width="200"   height="200"   layout="responsive">Slider 3</amp-fit-text>
</amp-carousel>
</body>
</html>

amp html按钮在amp-list中不可点击

1 个答案: