Список AMP - как удалить пустое пространство, если мы не получили ответ от API? - PullRequest
Новая
       33

Список AMP - как удалить пустое пространство, если мы не получили ответ от API?

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

У нас есть страница AMP, где мы получаем 3 списка с сервера и связываем их с клиентом. Здесь - это та же самая скрипка.

Но так как выходные данные являются динамическими, и мы указываем высоту как 100, в коде здесь , где 2-й список возвращает пустой JSON, мы видим много пустого пространства, что нежелательно.

Код, который выбирает пустой список: 

<amp-list width="auto" height="100" layout="fixed-height" src="https://ampbyexample.com/json/examples-empty.json" class="m1">
    <template type="amp-mustache" id="amp-template-id">
      <div><a href="{{url}}">{{title}}</a></div>
    </template>
</amp-list

Как мы можем избавиться от этого списка AMP с фиксированной высотой и настроить высоту на основе содержимого, полученного с сервера?

Я прочитал нечто подобное здесь , но не могу этого проследить. Может кто-нибудь поделиться, пожалуйста, как решить эту проблему?

Ответы [ 3 ]

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

Вы можете добавить атрибут auto-resize к <amp-list> для динамического изменения высоты вашей страницы AMP.

Следуйте этому потоку github для получения дополнительной информации.Проверьте объединенный код от здесь .

0 голосов
/ 30 апреля 2019 
<amp-list height="0" [height]="items.length * 100" layout="fixed-height" src="https://ampbyexample.com/json/examples-empty.json" class="m1">
    <template type="amp-mustache" id="amp-template-id">
      <div><a href="{{url}}">{{title}}</a></div>
    </template>
</amp-list

Это сохранит ваш список на высоте 0 всегда, пока в списке усилителей не появятся элементы для отображения.Затем он добавит 100px высоты для каждого элемента в вашем массиве.Это также отображается, если вы ищете динамическое изменение размера Amp

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

В настоящее время это невозможно с amp-list. Вместо этого вы можете использовать amp-access . Подход заключается в том, чтобы вернуть данные JSON в конечную точку amp-access authorization. На основании данных вы можете динамически визуализировать контент на странице: 

<section amp-access="items">
  <template amp-access-template type="amp-mustache">
    {{#items}}
    <div><a href="{{url}}">{{title}}</a></div>
    {{/items}}
  </template>
</section>
...