顯示更多按鈕

簡介

這是一個範例，展示如何實作「顯示更多」設計模式。「顯示更多」是一種常見的設計模式，用於電子商務類別頁面，透過使用者互動觸發延遲載入更多內容。

設定

額外使用的 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。

FALLBACK

PLACEHOLDER

ERROR

END

<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`。我們也根據以下項目動態變更 amp-list 的高度

項目數量 (每個項目高度為 `108px`)。

<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 撰寫