AMP
  • websites

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 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> 
Требуются дальнейшие объяснения?

Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.

Перейти на Stack Overflow
Не нашли пояснения к функции?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Редактировать пример на GitHub