2

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

但是由于输出是动态的，并且我们将高度指定为 100，因此在此处的代码中，第二个列表返回空 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 列表并根据从服务器接收到的内容调整高度？

我在这里读到了类似的东西，但无法理解。有人可以分享如何解决这个问题吗？

4

4 回答 4

2

目前这在amp-list. 您可以改用amp-access。authorization该方法是在 amp-access端点中返回 JSON 数据。然后，您可以根据数据在页面上动态呈现内容：

<section amp-access="items">
  <template amp-access-template type="amp-mustache">
    {{#items}}
    <div><a href="{{url}}">{{title}}</a></div>
    {{/items}}
  </template>
</section>
于 2018-09-17T08:33:40.870 回答
0

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

关注这个github 线程以获取更多详细信息。从这里检查合并的代码。

于 2018-09-18T07:08:32.130 回答
0 
<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 动态调整大小，也会显示此内容

于 2019-04-30T20:56:37.960 回答
0

我也有同样的问题，也许这个小技巧可以帮助别人，只需编辑div 溢出样式（高度和显示），这将保持你喜欢的高度，记住这个 div 需要文本值（不能为空) 如果需要，只需将其可见性设置为隐藏即可。当 mustache 模板上没有显示 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>
于 2019-10-28T03:56:12.357 回答