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 上编辑示例