Angular+ionic实现折叠展开效果的示例代码

minapper 11 月 10, 2020 389 0

这篇文章主要介绍了Angular+ionic实现折叠展开效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

1，html中

<ion-item>

<ion-icon name=”chevron-up-outline” class=”up-gray” item-right *ngIf=”!isShow” (click)=”isShow=!isShow”>

</ion-icon>

<ion-icon name=”chevron-down-outline” class=”down-gray” item-right *ngIf=”isShow” (click)=”isShow=!isShow”>

</ion-icon>

</div>

</div>

</ion-item>

<ion-list *ngIf=”!isShow”>

</div>

</div>

</div>

</div>

</div>

</div>

</ion-list>

效果图

下面看下ionic3 模拟下拉展开/收缩效果

<ion-header>

<ion-navbar>

<ion-title>user</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-item>

用户信息

<ion-icon name=”ios-arrow-down” item-right *ngIf=”isShow” (click)=”isShow=!isShow”></ion-icon>

<ion-icon name=”ios-arrow-forward” item-right *ngIf=”!isShow” (click)=”isShow=!isShow”></ion-icon>

</ion-item>

<ion-list *ngIf=”isShow”>

<ion-item *ngFor=”let item of items” >

姓名：{{item.name}} 年龄：{{item.age}}

</ion-item>

</ion-list>

</ion-content>

到此这篇关于Angular+ionic实现折叠展开效果的示例代码的文章就介绍到这了,更多相关Angular+ionic实现折叠展开内容望大家以后多多支持！