amphtml: Use Amp List for showing more content when height is not available

We want the user to be able to load a amp-list of more comments after the initial page load. We don’t know the height of these comments because they can be any length. We can’t use the overflow button because we already have our own overflow button whose source is updated on amp-bind.

      <script type="application/json">
      {
        "moreCommentsSrc": "/json/comments2.json"
      }
      </script>
    </amp-state>

      <amp-list class="mt1" width="auto" height="600" [height]="comments.moreCommentsSrc == '/json/comments2.json' ? 600 : 1000" layout="fixed-height"
        src="/json/comments2.json"
        [src]="comments.moreCommentsSrc"
        >
        <template type="amp-mustache">
          <div class="flex px1 pt1 depth-{{depth}}">
            <amp-img width="44" height="44" class="mr1 flex-none" alt="user" src="/img/ic_account_box_black_48dp_1x.png"></amp-img>
            <div class="ampstart-card p1 comment">
              <p><span class="user">{{user}}</span> <span class="date">{{datetime}}</span></p>
              <p>{{text}}</p>
            </div>
          </div>
        </template>
      </amp-list>
      <button class="ampstart-btn caps m1 mb3 show" [class]="comments.moreCommentsSrc == '/json/comments2.json' ? 'ampstart-btn caps m1 mb3 show' : 'ampstart-btn caps m1 mb3 hide'" on="tap:AMP.setState({comments: {moreCommentsSrc: '/json/comments3.json'}})">Show more</button>```

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 24 (15 by maintainers)

Most upvoted comments

Thanks @sffriend ! @choumx, I think this is somewhat similar to the request for resizing when updated through amp-bind, except it’s done on the first page load. Would it be possible for amp-list to have container layout for its contents, or is that too risky for page jumps on first load?