Кнопка amp html не активируется внутри списка усилителей - PullRequest
Новая
       11

Кнопка amp html не активируется внутри списка усилителей

0 голосов
/ 03 июля 2018

Заранее извиняюсь - я думаю, что это где-то небольшая опечатка, так как я уверен, что это сработало ...

Краткая версия вопроса: в приведенном ниже HTML-коде AMP отображаются обе кнопки, но кликабельна только та, которая находится вне списка усилителей.

Более длинная версия вопроса ниже, на случай, если это будет полезно.

Я пытаюсь реализовать карусель с несколькими слайдами, связанными со временем. Один из этих слайдов в произвольной позиции будет относиться к «сейчас».

Я хочу, чтобы пользователь мог щелкнуть по кнопке, которая переместит его на слайд, представляющий «сейчас».

Я получаю соответствующий индекс карусели, который относится к «сейчас», из конечной точки json, а затем намереваюсь установить событие ontap кнопки в шаблоне усов, чтобы перейти к соответствующему слайду.

Кнопка, которую я показываю, должна находиться внутри списка усилителей, поскольку именно так я получаю 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>

1 Ответ

0 голосов
/ 06 июля 2018

Мне забавно, что слайдер статичен, потому что amp-carousel не отображает amp-img внутри amp-list.

Но кнопка доступна в списке усилителей

Вот рабочий URL

Json Url отображает кнопку под списком усилителей: Нажмите здесь

Код: 

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