显示更多按钮

简介

这是一个展示如何实现“显示更多”设计模式的示例。“显示更多”是电子商务类别页面上常用的设计模式，用于通过用户交互触发延迟加载更多内容。

设置

此外，必须在标头中导入使用的 AMP 组件。我们使用 amp-list 来显示产品列表

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

我们使用 amp-bind 来动态更改 amp-list 的 src

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

我们使用 amp-form 来在用户交互后调用以获取额外的产品

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

我们使用 amp-mustache 来渲染 amp-list 内容

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

如何实现“显示更多”按钮

您可以使用 amp-list 并将额外的 load-more 属性设置为选项 manual 来实现“显示更多”按钮。可选的 load-more-bookmark 属性指定返回数据中的一个字段名，该字段名将提供要加载的下一项的 URL。如果未指定，amp-list 将期望响应对象将 load-more-src 字段设置为要加载的下一个 URL。

回退

占位符

错误

结束

<amp-list width="auto" height="332" layout="fixed-height" src="/documentation/examples/api/photo-stream?items=3&left=3" binding="refresh" load-more="manual" load-more-bookmark="next">
  <template type="amp-mustache">
    <div class="list-item">
      <amp-img src="{{imageUrl}}" width="100" height="100">
      </amp-img>
      <p>{{title}}</p>
    </div>
  </template>
  <div fallback>
    FALLBACK
  </div>
  <div placeholder>
    PLACEHOLDER
  </div>
  <amp-list-load-more load-more-failed>
    ERROR
  </amp-list-load-more>
  <amp-list-load-more load-more-end>
    END
  </amp-list-load-more>
</amp-list>

使用 amp-list 和 amp-bind 显示更多

您还可以通过使用 amp-list 和 amp-bind 手动实现“显示更多”按钮，其中 amp-list 的 src 数据绑定到 amp-state 元素的值。这里我们使用两个 amp-state：photos，它使用与 amp-list 相同的 json src，因此最初将包含相同的项目列表...

<amp-state id="photos" src="/documentation/examples/api/photo-stream?items=3&left=3">
</amp-state>

...而 ID 为 product 的 amp-state 仅用于实现显示更多逻辑，我们允许用户单击 3 次。

<amp-state id="product">
  <script type="application/json">
  {
    "moreItemsPageIndex": 2,
    "hasMorePages": true
  }
  </script>
</amp-state>

我们将 amp-list 的 src 属性绑定到包含产品的 amp-state 对象

从该组件作为 src。我们还根据

项目数（每个项目的高度为 108px）动态更改 amp-list 的高度。

<amp-list src="/documentation/examples/api/photo-stream?items=3&left=3" [src]="photos.items" binding="refresh" layout="fixed-height" width="auto" height="332" [height]="photos.items.length * 108 + 8">
  <template type="amp-mustache">
    <div class="list-item">
      <amp-img src="{{imageUrl}}" width="100" height="100">
      </amp-img>
      <p>{{title}}</p>
    </div>
  </template>
</amp-list>

“显示更多”按钮是通过一个表单实现的，该表单在 submit-success 事件上触发页面更新。

然后，我们使用 concat 函数将表单结果合并到 amp-state 已加载的项目中。

<form method="GET" action="/documentation/examples/api/photo-stream" action-xhr="/documentation/examples/api/photo-stream" target="_top" on="submit-success: AMP.setState({
        photos: {
          items: photos.items.concat(event.response.items)
        },
        product: {
          moreItemsPageIndex: product.moreItemsPageIndex - 1,
          hasMorePages: !!event.response.next
        }
      });">
  <input type="hidden" name="items" value="3">
  <input type="hidden" name="left" value="2" [value]="product.moreItemsPageIndex">
  <input type="submit" value="Show more" [hidden]="!product.hasMorePages">
</form>

需要进一步解释吗？

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

转到 Stack Overflow

一个未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的长期参与者，但我们也欢迎您对特别感兴趣的问题进行一次性贡献。

在 GitHub 上编辑示例

由 @kul3r4 编写