AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • 网站

动态手风琴

在 Playground 中打开

简介

此代码片段展示了如何使用 amp-bind 和 amp-list 动态更新 amp-accordion 部分中的数据。

设置

导入 amp-accordion 组件以在手风琴中显示内容。

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

导入 amp-bind 组件以根据用户输入更新手风琴状态。

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

导入 amp-list 组件以动态显示炎热或寒冷国家/地区的名称。

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

导入 amp-mustache 组件以动态显示来自 amp-list 的项目。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

实现

如果选择“热”，则 input 部分将 amp-state 设置为 {climate: 1}，如果选择“冷”，则设置为 {climate: 2}。 amp-accordion 默认情况下处于隐藏状态，但如果 climate != 0（因此必须选择热或冷），则会显示。

<input type="radio" id="f-option1" name="selector1" role="button" tabindex="0" on="change:AMP.setState({climate:(event.checked) ? 1 : 0})">
<label for="f-option1">Warm</label>
<input type="radio" id="f-option2" name="selector1" on="change:AMP.setState({climate: (event.checked) ? 2 : 0})" role="button" tabindex="0">
<label for="f-option2">Cold</label>

手风琴

每个 amp-accordion 部分都是一个不同的洲，因此 climateCountries 数据也必须按洲进行筛选。此筛选在 amp-list 的 [src] 部分中完成。此外，高度是根据筛选状态中的项目数量动态设置的。

climateCountries 的 src 是根据用户输入动态变化的。如果 {climate == 1}，则从 hot.json 文件中提取 climateCountries 数据。否则，如果 {climate == 2}，则从 cold.json 文件中提取 climateCountries 数据

<div id="accordion" [hidden]="climate == 0" hidden>
  <p>The accordion below lists countries, organized by continent, that match the climate you chose. </p>
  <amp-state id="climateCountries" [src]="climate == 1 ? '/static/samples/json/hot.json': climate == 2 ? '/static/samples/json/cold.json': ''">
  </amp-state>
  <amp-accordion>
    <section>
      <h4>
        Asia
      </h4>
        <amp-list layout="fixed-height" height="0" binding="refresh" [src]="climateCountries.countries.filter(country => country.continent == 'Asia')" [is-layout-container]="true">
          <template type="amp-mustache">
            <ul>
              <span>{{Name}}</span>
            </ul>
          </template>
        </amp-list>
    </section>
    <section>
      <h4>
        Europe
      </h4>
        <amp-list layout="fixed-height" height="0" binding="refresh" [src]="climateCountries.countries.filter(country => country.continent == 'Europe')" [is-layout-container]="true">
          <template type="amp-mustache">
            <ul>
              <span>{{Name}}</span>
            </ul>
          </template>
        </amp-list>
    </section>
    <section>
      <h4>
        South America
      </h4>
        <amp-list layout="fixed-height" height="0" binding="refresh" [src]="climateCountries.countries.filter(country => country.continent == 'South America')" [is-layout-container]="true">
          <template type="amp-mustache">
            <ul>
              <span>{{Name}}</span>
            </ul>
          </template>
        </amp-list>
    </section>
    <section>
      <h4>
        North America
      </h4>
        <amp-list layout="fixed-height" height="0" binding="refresh" [src]="climateCountries.countries.filter(country => country.continent == 'North America')" [is-layout-container]="true">
          <template type="amp-mustache">
            <ul>
              <span>{{Name}}</span>
            </ul>
          </template>
        </amp-list>
    </section>
  </amp-accordion>
</div>
需要进一步解释？

如果此页面上的解释未涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

转到 Stack Overflow
一个未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例