amp-list
- Introduction Setup Basic usage Re-using an existing template Handling list overflow Dynamic src Rendering amp-state Empty list content Using a placeholder Triggering refresh

網站

amp-list

簡介

The amp-list 啟用 AMP 中的用戶端算繪。內容可以從 JSON 端點擷取，或從本機 amp-state 擷取。

設定

匯入 amp-list 元件 ...

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

... 以及標頭中的 amp-mustache 元件。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

匯入 amp-bind 元件，以動態變更 amp-list 的內容。

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

基本用法

amp-list 內容由 JSON CORS 端點提供，該端點由 src 屬性定義。網址的協定必須是 HTTPS。回應必須是 JSON 物件，其中包含陣列屬性 items，例如

{
  "items": [
    {
      "title": "amp-carousel",
      "url": "https://ampbyexample.com/components/amp-carousel"
    },
    ...
  ]
}

清單內容會透過 amp-mustache 範本算繪。範本可以透過 ID 指定，或使用巢狀元素指定。基於效能考量，我們新增了 binding="no"，因為我們未使用 amp-bind。

<amp-list layout="fixed-height" height="100" src="/static/samples/json/examples.json" binding="no">
  <template type="amp-mustache">
    <div><a href="{{url}}">{{title}}</a></div>
  </template>
</amp-list>

重複使用現有範本

範本也可以使用現有 template 元素的 ID 指定。

<template type="amp-mustache" id="amp-template-id">
  <div><a href="{{url}}">{{title}}</a></div>
</template>
<amp-list layout="fixed-height" height="100" src="/static/samples/json/examples.json" template="amp-template-id" binding="no">
</amp-list>

處理清單溢位

如果 amp-list 內容需要的空間超出可用空間，AMP 執行階段會顯示溢位元素 (如果已指定)。

<amp-list layout="fixed-height" height="48" src="/static/samples/json/examples.json" binding="no">
  <div overflow role="button" aria-label="Show more" class="list-overflow">
    Show more
  </div>
  <template type="amp-mustache">
    <div><a href="{{url}}">{{title}}</a></div>
  </template>
</amp-list>

動態 `src`

amp-list 的內容可以透過使用 amp-bind 修改其 src 值來動態變更。

<amp-list layout="fixed-height" height="100" src="/static/samples/json/examples.json" [src]="srcUrl" binding="no">
  <template type="amp-mustache">
    <div><a href="{{url}}">{{title}}</a></div>
  </template>
</amp-list>
<button on="tap:AMP.setState({ srcUrl: '/static/samples/json/examples2.json' })">Change source</button>

算繪 `amp-state`

這個範例展示了 amp-list 最強大的功能之一：能夠直接從 amp-state 算繪物件。這可以透過將 amp-bind 運算式的結果繫結至 src 屬性來達成：[src]="items"。為了確保 amp-list 相應地調整大小，我們會根據清單元素數量動態計算 height：[height]="items.length * 22"。初始狀態 (空清單) 在 amp-state 元素中定義。

amp-bind 運算式不會在頁面載入時評估，而只會在使用者互動發生後才評估。初始 amp-list 內容仍需要從 JSON 端點擷取。

<amp-state id="items">
  <script type="application/json">
    []
  </script>
</amp-state>
<amp-list layout="fixed-height" height="0" [src]="items" [height]="items.length * 22" single-item items="." binding="no">
  <template type="amp-mustache">
    <div>{{ . }}</div>
  </template>
</amp-list>
<button on="tap:AMP.setState({ items: items.splice(items.length, 0, 'item ' + items.length) })">
  Add item
</button>

空清單內容

如果清單包含空陣列，您可以使用 mustache 反向區段來列印訊息。

為了讓此功能運作，我們必須使用 single-item 屬性和 items 屬性，才能存取範本內部的根 items 陣列。

<amp-list layout="fixed-height" height="100" src="/static/samples/json/examples-empty.json" [src]="emptyListSampleSrc || '/static/samples/json/examples-empty.json'" single-item items="." reset-on-refresh binding="no">
  <template type="amp-mustache">
    {{#items}}
      <div><a href="{{url}}">{{title}}</a></div>
    {{/items}}
    {{^items}}
      <div>No items founds.</div>
    {{/items}}
  </template>
</amp-list>
<button on="tap:AMP.setState({ emptyListSampleSrc: '/static/samples/json/examples.json' })">
  Add items
</button>

使用預留位置

您可以使用外觀與算繪項目相似的自訂預留位置，以改善清單載入時的使用者體驗。我們正在使用一個刻意將回應延遲 10 秒的端點。

載入中...

<amp-list id="amp-list-placeholder" noloading layout="fixed-height" height="654" src="/documentation/examples/api/slow-json-with-items/?delay=5000" binding="no">
  <div placeholder>
    <div class="product">
      <div class="image-placeholder"></div>
      <div>Loading...</div>
    </div>
    <div class="product">
      <div class="image-placeholder"></div>
      <div>Loading...</div>
    </div>
    <div class="product">
      <div class="image-placeholder"></div>
      <div>Loading...</div>
    </div>
  </div>
  <template type="amp-mustache">
      <div class="product">
          <amp-img width="150" height="100" alt="{{name}}" src="{{img}}"></amp-img>
          <div>
            <div>{{name}}</div>
            <div>{{{stars}}}</div>
            <div>${{price}}</div>
          </div>
      </div>
  </template>
</amp-list>

觸發重新整理

您可以使用 refresh 動作來觸發 amp-list 的重新整理。請注意我們如何使用 reset-on-refresh 屬性，以確保重新載入預留位置。

<button on="tap:myAmpList.refresh">Refresh list</button>
<amp-list id="myAmpList" reset-on-refresh layout="fixed-height" height="600" src="/documentation/examples/api/slow-json-with-items/?delay=1000" binding="no">
  <template type="amp-mustache">
      <div class="product">
          <amp-img width="150" height="100" alt="{{name}}" src="{{img}}"></amp-img>
          <div>
            <div>{{name}}</div>
            <div>{{{stars}}}</div>
            <div>${{price}}</div>
          </div>
      </div>
  </template>
</amp-list>

需要進一步說明嗎？

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

前往 Stack Overflow

未說明的特色？

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

在 GitHub 上編輯範例

Written by @kul3r4