请问如何创建“折叠列表(Accordion List)”?
我需要在几个板块中使用,例如“关于我们”、“服务”,点击时会显示相应信息。
希望您能帮助我。这是在Ionic 4中实现的。
请问如何创建“折叠列表(Accordion List)”?
我需要在几个板块中使用,例如“关于我们”、“服务”,点击时会显示相应信息。
希望您能帮助我。这是在Ionic 4中实现的。
这不是Ionic 4中包含的组件,但它并不难解决。
如果你想使用现成的组件,可以使用Angular Material 的展开面板(expansion panel)。
如果只需要快速了解,操作步骤如下:
深度链接支持的额外考虑:
Josh在他的教程中介绍了它 - 在Ionic中创建手风琴列表。
在Mastering Ionic上也有一个详细的教程。
在这里我使用了标志。点击图像后,下一个面板将打开。第一次是[隐藏]。对于多次单击图像,我在.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);
}