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

У нас есть страница 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 с фиксированной высотой и отрегулировать высоту на основе содержимого, полученного с сервера?

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

Источник

2 ответа

Решение

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

<section amp-access="items">
  <template amp-access-template type="amp-mustache">
    {{#items}}
    <div><a href="{{url}}">{{title}}</a></div>
    {{/items}}
  </template>
</section>
Источник

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

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

Источник 
<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 всегда, пока в Amp-List не появятся элементы для отображения. Затем он добавит 100 пикселей высоты для каждого элемента в вашем массиве. Это также отображается, если вы ищете динамическое изменение размера усилителя.

Источник

У меня такая же проблема, возможно, этот маленький хитрый трюк может кому-то помочь, просто отредактируйте стиль переполнения div (высота и отображение), это будет поддерживать его высоту, как вам нравится, помните, что это текстовое значение div необходимо (не может быть пустым) просто установите его видимость скрытой, если хотите. Когда в шаблоне усов нет значения json, он автоматически вернет пустое пространство в нормальное состояние.

<style amp-custom>
        amp-list > div.amp-visible{
            display:block;
            height:75px;
        }
        #hideButton{
            visibility: hidden;
        }
</style>    
<amp-list layout="flex-item" src="/static/inline-examples/data/amp-list-data.json">
<div overflow id="hideButton">See more</div>
  <template type="amp-mustache">
    <div class="image-entry">
      <amp-img src="{{imageUrl}}"
        width="100"
        height="75"></amp-img>
      <span class="image-title">{{title}}</span>
    </div>
</template>
</amp-list>
Источник
Другие вопросы по тегам