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