amp-list with flexible height to a max

问题

I want to provide a list which will vary with the input of a text box. This list will provide the results for that search query. I am using amp-list for this.

I want the list height to adjust to the number of results (flex-item should be fine here). But I want the list to have a max height of e.g. 500px and no more

Is this possible? Thank you very much

回答1:

Dynamic resizing is currently in the works: see this thread on GitHub - although not sure if this applies in your current situation. Are you able to provide the code or a link to what you're currently working on?

To accomplish the max-height with an overflow of scroll, put a container div around the amp-list. Something like below.

div#list-container {
  max-height: 500px;
  overflow: scroll;
}

<div id="list-container">
  <amp-list>
  </amp-list>
</div>

回答2:

You can use amp-bind to dynamically update the amp-list height based on the number of search results:

<amp-list layout="fixed-height"
  height="0"
  src="/results"
  [src]="searchResults"
  [height]="searchResults.length < 5 ? 100 * searchResults.length : 500">
  <template type="amp-mustache">
    // search results
  </template>
</amp-list>

I assumed that a single search result has a height of 100px and that the results are contained in an amp-state variable called searchResults.

Here is a working sample demonstrating how to dynamically resize an amp-list.

来源：https://stackoverflow.com/questions/51614270/amp-list-with-flexible-height-to-a-max