ionic3 模拟手风琴布局
user.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage({
name: 'page-user',
segment: 'path-user',
priority: 'off'
})
@Component({
templateUrl: 'user.html',
})
export class User {
temp:string;
items=[{
"name": "张三",
"age":18
},{
"name": "李四",
"age":20
},{
"name": "王五",
"age":21
}];
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad User');
}
accordion(index,temp) {
this.temp=temp+index;
}
}
user.html
<ion-header>
<ion-navbar>
<ion-title>用户</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list *ngFor="let item of items;let indx=index" style="margin: 0px">
<ion-item>
姓名:{{item.name}}
<ion-icon name="ios-arrow-down" item-right *ngIf="temp=='show'+indx" (click)="accordion(indx,'hihe')"></ion-icon>
<ion-icon name="ios-arrow-forward" item-right *ngIf="temp!='show'+indx" (click)="accordion(indx,'show')"></ion-icon>
</ion-item>
<ion-card *ngIf="temp=='show'+indx" >
<ion-card-header>
介绍
</ion-card-header>
<ion-card-content>
年龄:{{item.age}}
</ion-card-content>
</ion-card>
</ion-list>
</ion-content>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步