動態更新資訊摘要中的項目

檢視示範在 Playground 中開啟

簡介

這個範例示範如何顯示資料摘要，讓使用者無需捲動即可瀏覽電子郵件中的大量項目。

這個範例結合使用 amp-list，從伺服器擷取初始項目，以及 amp-form，透過發出新的伺服器要求來「重新整理」單一項目。

樣式

我們使用 CSS 在首次提交表單後隱藏最初擷取的項目。

我們也定義版面配置，讓我們能設定固定的卡片大小，以確保提交表單不會導致內容跳動。

<style amp-custom>
  .amp-form-submit-success .initial-content,
  .amp-form-submitting .initial-content,
  .amp-form-submit-error .initial-content {
    display: none;
  }

  .card {
    width: 160px;
    height: 120px;
    margin: 10px;
    float: left;
    position: relative;
  }

  .card .next-button {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
</style>

單一項目範本

在卡片內定義單一項目的範本，並賦予 ID。這個範本會由 amp-form 用於顯示新項目。

在這個案例中，我們使用單一個 amp-img。

<template id="item-template" type="amp-mustache">
  <amp-img src="{{items.imageUrl}}" layout="fixed" width="160" height="90"></amp-img>
</template>

初始項目清單

我們為初始項目及其版面配置定義範本，並賦予 ID，以便後續在 amp-list 中使用。這個範本會由 amp-list 用於從伺服器擷取最新的初始內容。

它本身包含每個項目的 amp-form，並參考上方定義的範本 (透過其 ID 參照)。透過為 amp-form 使用不同的範本，我們可以「重新整理」部分內容，在這個案例中就是圖片。

這個範本包含與上方範本相同的標記 (在這個案例中，是單一個 amp-img)，用於呈現初始項目。這會包裝在 <div class="initial-content"> 中，該元素會在使用者首次提交表單時隱藏。

<template id="list-template" type="amp-mustache">
  <form class="card" method="post" action-xhr="https://amp.dev.org.tw/documentation/examples/api/photo-stream?single&width=160&height=90">
    <div class="initial-content">
      <amp-img src="{{imageUrl}}" layout="fixed" width="160" height="90"></amp-img>
    </div>

    <div submit-success template="item-template"></div>

    <input class="next-button" type="submit" value="Next">
  </form>
</template>

我們使用 amp-list，透過使用上方定義的範本 (透過其 ID 參照)，從伺服器呈現初始項目。

高度符合卡片及其邊界的高度總和。初始伺服器回應定義要顯示的卡片數量 (在這個案例中為四張)。

<amp-list template="list-template" src="https://amp.dev.org.tw/documentation/examples/api/photo-stream?width=160&height=90&items=4" layout="fixed" width="360" height="280">
</amp-list>

需要進一步說明嗎？

如果這個頁面上的說明沒有涵蓋您的所有問題，歡迎與其他 AMP 使用者聯絡，討論您的確切使用案例。

前往 Stack Overflow

有功能未說明嗎？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別關注的問題提供一次性貢獻。

在 GitHub 上編輯範例

由 @fstanis 撰寫