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