javascript - Google AMP：如何在 AMP 中进行无限滚动？

Question

我可以在不使用实验性功能的情况下在 AMP 中进行无限滚动吗？

Answer 1

是的，有点。这似乎适用于 Chrome 桌面，但不适用于 Android 版 Chrome，但我确信从这个示例中可以学到很多东西。

这个想法是 amp-list 仅在接近视口时加载，所以我使用递归模板在每个 amp-list 的末尾加载一个 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>