amp-live-list

簡介

「amp-live-list」元件新增了對 AMP 頁面發布即時更新內容的支援，以便在來源文件中提供新內容時使用。這非常適合用於實作即時部落格。在此處尋找即時部落格的範例。

換句話說，AMP 執行階段會輪詢伺服器，以取得來源文件的更新，並自行擷取。伺服器可以傳回整個 AMP 頁面或部分頁面，而執行階段會就地無縫更新頁面。

設定

在標頭中匯入 amp-live-list 元件。

<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>

使用者互動後更新：即時部落格

使用 data-poll-interval 屬性指定 amp-live-list 元件輪詢新資料的頻率。最短間隔為 15 秒。使用 data-max-items-per-page 指定頁面上顯示的最大項目數。如需所有屬性的詳細說明，請參閱 amp-live-list。

使用 on="tap:my-live-list.update" 從伺服器載入最新變更。當 AMP 執行階段偵測到新的文件變更時，就會出現一個按鈕。請注意，按鈕必須定義為 amp-live-list 的直接子項。

「amp-live-list」必須在「<div items>」下方包含項目清單。每個項目都有特定的 ID，而 amp-live-list 將尋找具有新 ID 的項目。

按一下「您有更新」按鈕後，新內容會顯示在示範欄 (如果透過桌上型電腦存取示範，則為右側的欄位)。程式碼欄 (如果透過桌上型電腦存取示範，則為中央的欄位) 不會自行更新，但如果您想查看頁面上的所有項目，請重新載入頁面。

<amp-live-list layout="container" data-poll-interval="15000" data-max-items-per-page="5" id="amp-live-list-insert-blog">
  <button update on="tap:amp-live-list-insert-blog.update">You have updates</button>
  <div items>
  </div>
</amp-live-list>

「amp-live-list」的內容是隨機產生的 (為了更容易且可重複的測試)。

自動更新

如果您想在沒有使用者互動的情況下更新現有的清單項目，您需要透過 data-update-time 屬性指定執行更新的時間。以下範例將顯示並自動更新目前時間。這種方法非常適合用於顯示即時比分或即時市場價值。

時間是：

<amp-live-list layout="container" data-poll-interval="15000" data-max-items-per-page="1" id="amp-live-list-update">
  <button update on="tap:amp-live-list-insert-blog.update">You have updates</button>
  <div items>
    <div id="time" data-sort-time="1234567" data-update-time="" class="time">
      The time is: <time></time>
    </div>
  </div>
</amp-live-list>

需要進一步說明嗎？

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

前往 Stack Overflow

有未說明的特色功能嗎？

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

在 GitHub 上編輯範例