Paged List

Introduction

Often, users requests data that could fill multiple pages of content, so web applications must provide a way for users to navigate across pages of data. This pattern appears in search results, product browse pages, and more. Here we implement paged navigation using the amp-bind and amp-list components.

Setup

First we include amp-bind to track and mutate the page state.

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

Next we include amp-list to request and display the lists of products.

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

Finally, we include amp-mustache to render the mustache templates inside the <amp-list>.

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

Styles

No additional styles are necessary, but you can optionally add styles to change the layout or the look and feel of the page.

Implementation

We use an <amp-list> element to render the product cards. An <amp-state> element initializes and tracks the number of pages in the response. An overflow element ensures that the user is able to reveal more content if any of the products are truncated by the bottom of the <amp-list>.

<amp-list class="paged-amp-list" layout="fixed-height" height="720" src="https://amp.dev/documentation/examples/interactivity-dynamic-content/paged_list/search" [src]="'https://amp.dev/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.dev/documentation/examples/interactivity-dynamic-content/paged_list/search" [src]="'https://amp.dev/documentation/examples/interactivity-dynamic-content/paged_list/search?page=' + pageNumber">
</amp-state>

Daha fazla açıklamaya mı ihtiyacınız var?

Bu sayfadaki açıklamalar tüm sorularınıza yanıt vermiyorsa, özgün kullanım durumunuzu tartışmak üzere diğer AMP kullanıcılarına ulaşmaktan çekinmeyin.

Stack Overflow'a git

Açıklanmayan bir özellik mi var?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

Örneği GitHub'ta düzenle

Written by @cvializ