顯示更多按鈕

簡介

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

設定

必須在標頭中匯入額外使用的 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。我們也根據

項目數量 (每個項目高度為 108px) 動態變更 amp-list 的高度。

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