amp-next-page
簡介
amp-next-page 讓您可以在 AMP 頁面中加入無限捲動風格的體驗。
設定
匯入 amp-next-page 元件。
<script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
基本用法
此範例使用 amp-next-page 元件來載入其他範例頁面。它定義了一個自訂分隔符號。
<amp-next-page>
<script type="application/json">
[
{
"title": "amp-img",
"image": "https://preview.amp.dev/static/samples/img/amp.jpg",
"url": "/documentation/examples/components/amp-img/"
},
{
"title": "amp-bind",
"image": "https://preview.amp.dev/static/samples/img/amp.jpg",
"url": "/documentation/examples/components/amp-bind/"
},
{
"title": "amp-accordion",
"image": "https://preview.amp.dev/static/samples/img/amp.jpg",
"url": "/documentation/examples/components/amp-accordion/"
},
{
"title": "amp-lightbox-gallery",
"image": "https://preview.amp.dev/static/samples/img/amp.jpg",
"url": "/documentation/examples/components/amp-lightbox-gallery/"
},
{
"title": "amp-list",
"image": "https://preview.amp.dev/static/samples/img/amp.jpg",
"url": "/documentation/examples/components/amp-list/"
}
]
</script>
<div class="amp-next-page-sample-separator" separator>
amp-next-page separator
</div>
</amp-next-page>
需要更多說明嗎？
如果本頁的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。
前往 Stack Overflow 未說明的特色？AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性的貢獻。
在 GitHub 上編輯範例