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>
Daha fazla açıklamaya mı ihtiyacınız var?

Bu sayfadaki açıklamalar tüm sorularınıza yanıt vermiyorsa, özgün kullanım durumunuzu tartışmak üzere diğer AMP kullanıcılarına ulaşmaktan çekinmeyin.

Stack Overflow'a git
Açıklanmayan bir özellik mi var?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

Örneği GitHub'ta düzenle