Question

问我如何创建“手风琴列表”。

我需要在几个部分中使用示例“关于我们”，“服务”，在单击时，我将显示信息。

希望您能帮助我。在离子4中

Answer 1

这不是Ionic 4中包含的组件，但这不是一个很难解决的问题。

如果要使用现成的组件，则可以使用Angular Material's expansion panel。

如果您只是想快速浏览一下，那就是这样：

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

深层链接支持的奖励注意事项：

打开每个面板时，更新网址中的#fragment
在页面加载时检查匹配的#fragment并将其展开

Josh上有一个教程-Creating an Accordion List in Ionic。

在Mastering Ionic上还有详细的教程。

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);
       }

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

2 个答案: