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

Question

问我是如何创建"Accordion List ".

我需要几个部分的示例"About us" "Services"，在我点击的那一刻，我会显示信息。

希望你能帮助我。在离子 4

Answer 1

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

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

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

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

深度链接支持的额外注意事项：

打开每个面板时更新url中的#fragment
在页面加载时检查匹配的 #fragment 并展开它

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

Mastering Ionic上也有详细教程。

Answer 2

这里我用的是flag。单击图像后，将打开下一个面板。这是 [隐藏] 首先 time.For 多次单击我在 .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 创建手风琴列表？

How to create an Accordion List with Ionic 4?

list

ionic-framework

angular

ionic4