分页列表

简介

通常，用户请求的数据可能会填充多个内容页面，因此 Web 应用程序必须提供一种让用户浏览数据页面的方法。这种模式出现在搜索结果、产品浏览页面等中。这里，我们使用 amp-bind 和 amp-list 组件实现分页导航。

设置

首先，我们包含 amp-bind 来跟踪和改变页面状态。

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

接下来，我们包含 amp-list 来请求和显示产品列表。

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

最后，我们包含 amp-mustache 以在 <amp-list> 内渲染 Mustache 模板。

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

样式

不需要额外的样式，但您可以选择添加样式来更改布局或页面的外观。

实现

我们使用 <amp-list> 元素来渲染产品卡片。<amp-state> 元素初始化并跟踪响应中的页数。溢出元素确保用户能够显示更多内容，以防任何产品被 <amp-list> 的底部截断。

<amp-list class="paged-amp-list" layout="fixed-height" height="720" src="https://amp.org.cn/documentation/examples/interactivity-dynamic-content/paged_list/search" [src]="'https://amp.org.cn/documentation/examples/interactivity-dynamic-content/paged_list/search?page=' + pageNumber" binding="no" reset-on-refresh single-item>
          <template type="amp-mustache">
            <p class="info">Page {{currentPage}} of {{pageCount}}</p>
            <div class="items">
              {{#products}}
              <div class="item">
                <amp-img layout="responsive" class="image" width="320" height="240" src="{{image}}"></amp-img>
                <strong class="title">{{title}}</strong>
                <p class="copy">{{copy}}</p>
              </div>
              {{/products}}
            </div>
          </template>
          <div overflow>
            <button>Show more</button>
          </div>
</amp-list>
<div class="navigation">
  <button class="prev" hidden [hidden]="pageNumber < 2" on="tap: AMP.setState({ pageNumber: pageNumber - 1 })">
    Previous
  </button>
  <button class="next" [hidden]="page ? pageNumber >= page.items.pageCount : false" on="tap: AMP.setState({ pageNumber: pageNumber ? pageNumber + 1 : 2 })">
    Next
  </button>
</div>
<amp-state id="page" src="https://amp.org.cn/documentation/examples/interactivity-dynamic-content/paged_list/search" [src]="'https://amp.org.cn/documentation/examples/interactivity-dynamic-content/paged_list/search?page=' + pageNumber">
</amp-state>

需要进一步解释吗？

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

转到 Stack Overflow

未解释的功能？

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

在 GitHub 上编辑示例

作者： @cvializ