<amp-carousel> не работает должным образом с динамическими данными, использующими <amp-list> - PullRequest
Новая
       31

<amp-carousel> не работает должным образом с динамическими данными, использующими <amp-list>

0 голосов
/ 05 сентября 2018

У меня есть мой HTML: 

<amp-list height="400" layout="fixed-height" src="data.json">
   <template type="amp-mustache">
      <amp-carousel height="200" layout="fixed-height" type="carousel">
         <amp-img src="img/{{ imgSrc }}.jpg" layout="fixed" width="100" height="100" alt="{{ productName }}"></amp-img>
      </amp-carousel>
   </template>
</amp-list>

Который должен отображать карусель с изображениями продуктов, которые я указал в файле data.json. Однако, если вы посмотрите на мою страницу здесь , она не будет работать так, как я ожидал. Я попытался удалить динамические функции, и это работает как положено, поэтому что-то с <amp-list> сбивает с толку. Я следил за проблемами в AMP Project GitHub: здесь , здесь и здесь .

Вот как должен выглядеть компонент :

https://ampbyexample.com/playground/#url=https%3A%2F%2Fampbyexample.com%2Fcomponents%2Famp-carousel%2Fsource%2F&mode=Responsive

А вот как это выглядит сейчас:

https://www.perfectimprints.com/amp/product/offering-buckets/

Любое понимание будет высоко ценится. Спасибо!

1 Ответ

0 голосов
/ 06 сентября 2018

Они должны использовать список усилителей в режиме single-item, а затем вручную перебирать различные элементы: 

<amp-list width="325" height="325" layout="fixed" single-item src="/items.json">
  <template type="amp-mustache">
    <amp-carousel type="slides" layout="fill">
      {{#items}}
      <amp-img src="{{src}}" layout="fill" alt="{{alt}}"></amp-img>
      {{/items}}
    </amp-carousel>
  </template>
</amp-list>

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

...