CODEWITHSUNDEEP
javascripthtmlamp-htmlamp-list
yonso
yonso

Reputation: 275

Google AMP: How to make an infinite-scroll in AMP?

Can I make an infinite scroll in AMP without using experimental features?

Upvotes: 2

Views: 2401

Answers (1)

yonso
yonso

Reputation: 275

Yes, sort of. This seems to be working on Chrome desktop but not on Chrome for Android, but I'm sure there is a lot to be learned from this example.

The idea is that amp-list is loaded only when it nears the viewport, so I used recursive templates to load an amp-list at the end of each amp-list.

<div style="position:relative;height:10000px;">

    <amp-list
              src="/amp/listData/bizReviews.php?id=<?=$bizId?>&skip=20"
              layout="fill">

        <div placeholder style="position:absolute;top:0;text-align:center;">
            <i class="fa fa-spinner fa-spin" style="margin-top:20px;font-size:20px;"></i>
        </div>
        <template type="amp-mustache" id="reviewListTemplate" style="position:absolute;top:0;">
            
<!--            just basic proof of concept data        -->
            <br>
            <br>
            {{userName}}
            <br>
            <br>
            
            {{#moreReviews}}
            <div style="position:relative;height:10000px;">
                <amp-list
                        src="{{moreReviews}}"
                        layout="fill"
                        template="reviewListTemplate"
                        >
                    <div placeholder style="position:absolute;top:0;text-align:center;">
                        <i class="fa fa-spinner fa-spin" style="margin-top:20px;font-size:20px;"></i>
                    </div>
                </amp-list>
            </div>
            {{/moreReviews}}
        </template>

    </amp-list>
</div>

Upvotes: 2

Related Questions