how to set limit of visible elements with show more button in <amp-list>?

Question

how should i use <amp-list> to parse json file but show limit number of elements of it on page, so that i can set up a show more button to load more elements? i use it to make a block with article recomendations for an amp email.

maybe there any other ways i can implement this block with amp usable in emails?

i'm trying to use example of dynamic updating from amp.dev but when i change link to another json file, it shows every element set in file and next button don't work properly like in an example

Answer 1

The example you linked uses an endpoint that returns a random image every time it's fetched. It's not really paging through a list of fixed images.

The AMP for Website format supports what you described using the load-more attribute of amp-list, but it's not supported in AMP for Email. To achieve the behavior in AMP for Email, you can do something like this:

1. Use amp-list to display the initial page
2. Use amp-form to display subsequent pages upon clicking on a button. The form can render an amp-mustache template upon a successful submission. The JSON used to render the template should have a dynamic size based an an integral form input.
3. Use amp-bind to manipulate the integral form input, e.g., make it increase by 10 every time the form is submitted. You can attach a tap event listener on the button to execute the setState action to change amp-state and then submit the above-mentioned form.