Google amp组件amp-list无法加载更多内容

Question

I had activate the AMP experiment amp-list-load-more, but it did not work

my page https://www.airtonews.com/amp/

 <amp-list src="data/list.json" load-more="manual" load-more-bookmark="next" binding="no" width="auto" height="300" layout="fixed-height"> <amp-list-load-more load-more-button> <template type="amp-mustache"> <div class="url-entry"> <a href="{{url}}">{{title}}</a> </div> </template> <button> See More </button> </amp-list-load-more> </amp-list> 

how to make it work? thanks!

Answer 1

Please refer to the load-more-button documentation:

An <amp-list-load-more> element with the load-more-button attribute that a button with the load-more-clickable attribute, which shows up at the end of the list (for the manual load-more) if there are more elements to be loaded. Clicking on this element will trigger a fetch to load more elements from the url contained in the load-more-src field or the field of the data returned corresponding to the load-more-bookmark attribute.

Example:

<amp-list load-more src="https://www.load.more/" ...>
  <div load-more-button>
    See More /* My custom see more button */
  </div>
</amp-list>

Include the src attribute in your <amp-list load-more> element. Try and check the implementation above.