如何使用Ionic 4创建手风琴列表？

Question

请问如何创建“折叠列表（Accordion List）”？

我需要在几个板块中使用，例如“关于我们”、“服务”，点击时会显示相应信息。

希望您能帮助我。这是在Ionic 4中实现的。

- Yael Zadkiel

Answer 1

这不是Ionic 4中包含的组件，但它并不难解决。

如果你想使用现成的组件，可以使用Angular Material 的展开面板(expansion panel)。

如果只需要快速了解，操作步骤如下：

1. 生成一个组件
2. 为面板扩展设置标准高度（这有点烦人，但这是CSS本身的限制，所以您必须这样做）
3. 使用CSS处理隐藏或展开+动画
4. 使用一小段代码切换扩展状态
5. 根据手风琴的类型（允许同时打开一个或多个），您可能还想编写另一个代码片段，在打开新面板时折叠所有其他面板。

深度链接支持的额外考虑：

1. 在每个面板打开时，更新URL中的#fragment
2. 检查页面加载时是否存在匹配的#fragment，并进行扩展

Josh在他的教程中介绍了它 - 在Ionic中创建手风琴列表。

在Mastering Ionic上也有一个详细的教程。

- rtpHarry

---

要拥有一个完全功能的手风琴，至少需要遵循WAI描述。https://www.w3.org/TR/wai-aria-practices-1.1/#accordion - IAfanasov

Answer 2

在这里我使用了标志。点击图像后，下一个面板将打开。第一次是[隐藏]。对于多次单击图像，我在.ts文件中使用标志。这对于静态列表非常有用。

.html file
    
    <img style="width:14px; height:14px;" src="assets/down_arrow.png" (click)="accordion()">
    <ion-row [hidden]="panel" class="panel">
    <div id="line"></div>
     <ion-text style="padding-left:7px; padding-right:7px; font-size:11px;">>Description</ion-text>
     </ion-row>
  
.ts file
    panel = 1;
    flag = 0;
    accordion(){
         if(this.flag == 0){
          this.panel++;
          this.flag = 1;
         }
         else if(this.flag == 1){
          this.panel--;
          this.flag = 0;
         }
         
         console.log(this.panel);
       }

- Lovely Chakraborty