分頁列表

簡介

通常，使用者要求的資料可能會填滿多個內容頁面，因此網路應用程式必須提供使用者在資料頁面之間導覽的方式。這種模式常見於搜尋結果、產品瀏覽頁面等等。在這裡，我們使用 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