文章/答案/技术大牛

发布

社区首页 >问答首页 >amp html按钮在amp-list中不可点击

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

Stack Overflow用户

提问于 2018-07-03 23:43:15

回答 1查看 353关注 0票数 1

提前道歉-我认为这是一个小打字错误，因为我相信我已经工作了…

问题的简短版本:在下面的AMP HTML中，两个按钮都被呈现，但只有amp列表之外的按钮是可点击的。

下面问题的更长版本，以防有用。

我正在尝试实现一个包含大量与时间相关的幻灯片的旋转木马。这些幻灯片中任意一个位置的幻灯片将与“现在”相关。

我希望用户能够点击一个按钮，将把他们带到幻灯片，代表“现在”。

我正在从一个json端点获取与'now‘相关的carousel索引，然后打算在一个八字胡模板中设置按钮的ontap事件，以转到相关的幻灯片。

我显示的按钮需要在一个amp-list中，因为这是我检索json的方式，它告诉我要指向哪个幻灯片索引。但只有当我将按钮放在amp-list之外时，才能单击该按钮。

我很确定这对我来说是件愚蠢的事情，有谁能说点什么吗？

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

amp-html

回答 1

Stack Overflow用户

发布于 2018-07-06 15:44:08

有趣的是，滑块是静态的，因为amp-carousel不会在amp-list中渲染amp-img。

但是在amp-list下可以点击按钮

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51158509

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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