AMP 列表 - 如果我们没有收到 API 的响应，如何删除空的 space？

Question

我们有 AMP 页面，我们从服务器获取 3 个列表并将其绑定到客户端。 Here 是相同的 fiddle。

但是由于输出是动态的并且我们将高度指定为 100，在代码 here 中第二个列表返回空 json，我们看到很多空 space 这是不可取的。

获取空列表的代码是：

<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 列表并根据从服务器接收到的内容调整高度？

我读到了类似的内容 here 但我无法理解。有人可以分享如何解决这个问题吗？

Answer 1

amp-list 目前无法做到这一点。您可以改用 amp-access。方法是 return amp-access authorization 端点中的 JSON 数据。然后，您可以根据数据在页面上动态呈现内容：

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

Answer 2

您可以将 auto-resize 属性添加到 <amp-list> 以动态更改 AMP 页面的高度。

关注此 github thread 了解更多详情。检查来自 here.

的合并代码

Answer 3

<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 有要显示的项目为止。然后它将为数组中的每个项目添加 100px 的高度。如果您搜索 Amp dynamic resizing

，也会显示此信息

Answer 4

我也有同样的问题，也许这个小技巧可以帮助其他人，只需编辑 div overflow 样式（高度和显示），这将保持您喜欢的高度，记住这一点div 需要文本值（不能为空）如果需要，只需将其可见性设置为隐藏即可。当小胡子模板上没有要显示的 json 值时，它会自动将空白 space 调整回正常。

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

AMP 列表 - 如果我们没有收到 API 的响应，如何删除空的 space？

AMP list - how to remove empty space if we get no response from the API?

amp-html

amp-list