分頁列表

簡介

通常，使用者請求的資料可能會佔滿多個頁面的內容，因此 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.dev.org.tw/documentation/examples/interactivity-dynamic-content/paged_list/search" [src]="'https://amp.dev.org.tw/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.org.tw/documentation/examples/interactivity-dynamic-content/paged_list/search" [src]="'https://amp.dev.org.tw/documentation/examples/interactivity-dynamic-content/paged_list/search?page=' + pageNumber">
</amp-state>

需要進一步說明嗎？

如果此頁面上的說明未能涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別熱衷的問題提供一次性貢獻。

在 GitHub 上編輯範例

由 @cvializ 撰寫