amp-list
- 簡介設定基本用法重複使用現有範本處理清單溢位動態 src 呈現 amp-state 空白清單內容使用預留位置觸發重新整理

網站

amp-list

簡介

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 上編輯範例

由 @kul3r4 撰寫