amp-list
- 简介设置基本用法重用现有模板处理列表溢出动态 src 渲染 amp-state 空列表内容使用占位符触发刷新

网站

amp-list

简介

amp-list 允许在 AMP 中进行客户端渲染。内容可以从 JSON 端点获取，也可以从本地 amp-state 获取。

设置

导入 amp-list 组件...

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

...并在标头中导入 amp-mustache 组件。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

导入 amp-bind 组件以动态更改 amp-list 的内容。

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

基本用法

amp-list 内容由 JSON CORS 端点提供，该端点由 src 属性定义。URL 的协议必须是 HTTPS。响应必须是一个 JSON 对象，其中包含一个数组属性 items，例如

{
  "items": [
    {
      "title": "amp-carousel",
      "url": "https://ampbyexample.com/components/amp-carousel"
    },
    ...
  ]
}

列表内容通过 amp-mustache 模板呈现。该模板可以通过 ID 指定，也可以使用嵌套元素指定。出于性能原因，我们添加 binding="no"，因为我们不使用 amp-bind。

<amp-list layout="fixed-height" height="100" src="/static/samples/json/examples.json" binding="no">
  <template type="amp-mustache">
    <div><a href="{{url}}">{{title}}</a></div>
  </template>
</amp-list>

重用现有模板

也可以使用现有 template 元素的 ID 指定模板。

<template type="amp-mustache" id="amp-template-id">
  <div><a href="{{url}}">{{title}}</a></div>
</template>
<amp-list layout="fixed-height" height="100" src="/static/samples/json/examples.json" template="amp-template-id" binding="no">
</amp-list>

处理列表溢出

如果 amp-list 内容需要的空间超过可用空间，AMP 运行时将显示溢出元素（如果指定）。

显示更多

<amp-list layout="fixed-height" height="48" src="/static/samples/json/examples.json" binding="no">
  <div overflow role="button" aria-label="Show more" class="list-overflow">
    Show more
  </div>
  <template type="amp-mustache">
    <div><a href="{{url}}">{{title}}</a></div>
  </template>
</amp-list>

动态 `src`

可以使用 amp-bind 修改 amp-list 的 src 值来动态更改其内容。

<amp-list layout="fixed-height" height="100" src="/static/samples/json/examples.json" [src]="srcUrl" binding="no">
  <template type="amp-mustache">
    <div><a href="{{url}}">{{title}}</a></div>
  </template>
</amp-list>
<button on="tap:AMP.setState({ srcUrl: '/static/samples/json/examples2.json' })">Change source</button>

渲染 `amp-state`

此示例展示了 amp-list 最强大的功能之一：能够直接渲染 amp-state 中的对象。这可以通过将 amp-bind 表达式的结果绑定到 src 属性来实现：[src]="items"。为了确保 amp-list 相应地调整大小，我们根据列表元素的数量动态计算 height：[height]="items.length * 22"。初始状态（一个空列表）在 amp-state 元素中定义。

amp-bind 表达式不会在页面加载时计算，而只在发生用户交互后计算。初始 amp-list 内容仍然需要从 JSON 端点获取。

<amp-state id="items">
  <script type="application/json">
    []
  </script>
</amp-state>
<amp-list layout="fixed-height" height="0" [src]="items" [height]="items.length * 22" single-item items="." binding="no">
  <template type="amp-mustache">
    <div>{{ . }}</div>
  </template>
</amp-list>
<button on="tap:AMP.setState({ items: items.splice(items.length, 0, 'item ' + items.length) })">
  Add item
</button>

空列表内容

如果列表包含一个空数组，可以使用 Mustache 反向部分来打印消息。

为了使其正常工作，我们必须使用 single-item 属性和 items 属性，以便能够访问模板中的根 items 数组。

<amp-list layout="fixed-height" height="100" src="/static/samples/json/examples-empty.json" [src]="emptyListSampleSrc || '/static/samples/json/examples-empty.json'" single-item items="." reset-on-refresh binding="no">
  <template type="amp-mustache">
    {{#items}}
      <div><a href="{{url}}">{{title}}</a></div>
    {{/items}}
    {{^items}}
      <div>No items founds.</div>
    {{/items}}
  </template>
</amp-list>
<button on="tap:AMP.setState({ emptyListSampleSrc: '/static/samples/json/examples.json' })">
  Add items
</button>

使用占位符

您可以使用与渲染项目相似的自定义占位符来改善列表加载时的用户体验。我们正在使用一个有意将响应延迟 10 秒的端点。

正在加载...

<amp-list id="amp-list-placeholder" noloading layout="fixed-height" height="654" src="/documentation/examples/api/slow-json-with-items/?delay=5000" binding="no">
  <div placeholder>
    <div class="product">
      <div class="image-placeholder"></div>
      <div>Loading...</div>
    </div>
    <div class="product">
      <div class="image-placeholder"></div>
      <div>Loading...</div>
    </div>
    <div class="product">
      <div class="image-placeholder"></div>
      <div>Loading...</div>
    </div>
  </div>
  <template type="amp-mustache">
      <div class="product">
          <amp-img width="150" height="100" alt="{{name}}" src="{{img}}"></amp-img>
          <div>
            <div>{{name}}</div>
            <div>{{{stars}}}</div>
            <div>${{price}}</div>
          </div>
      </div>
  </template>
</amp-list>

触发刷新

您可以使用 refresh 操作来触发 amp-list 的刷新。请注意我们如何使用 reset-on-refresh 属性来确保重新加载占位符。

<button on="tap:myAmpList.refresh">Refresh list</button>
<amp-list id="myAmpList" reset-on-refresh layout="fixed-height" height="600" src="/documentation/examples/api/slow-json-with-items/?delay=1000" binding="no">
  <template type="amp-mustache">
      <div class="product">
          <amp-img width="150" height="100" alt="{{name}}" src="{{img}}"></amp-img>
          <div>
            <div>{{name}}</div>
            <div>{{{stars}}}</div>
            <div>${{price}}</div>
          </div>
      </div>
  </template>
</amp-list>

需要进一步解释吗？

如果此页面上的解释没有涵盖您所有的问题，请随时与其他 AMP 用户联系以讨论您的确切用例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

作者： @kul3r4