amp-next-page
Introduction
amp-next-page allows you to add an infinite scroll style experience to your AMP pages.
Setup
Import the amp-next-page component.
<script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
Basic usage
This sample uses the amp-next-page component to load other sample pages. It defines a custom separator.
<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>
¿Necesita explicaciones más detalladas?
Si las explicaciones que se encuentran en esta página no responden todas sus preguntas, no dude en comunicarse con otros usuarios de AMP para discutir el caso de uso exacto.
Ir a Stack Overflow ¿Faltó que explicáramos alguna función?¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.
Editar ejemplo en GitHub