-
【list-item】
<h3> list-item</h3>
<ion-list lines="full">
<ion-item *ngFor="let item of list; let i=index;" [routerLink]="['/maws']">
<ion-label>=> {
{item}} --- {
{i+1}} </ion-label>
</ion-item>
</ion-list>
- 【list-item-header】
<h3> list-item-header</h3>
<ion-list lines="full">
<ion-list-header>
<ion-label>标题信息</ion-label>
<ion-button>更多</ion-button>
</ion-list-header>
</ion-list>
- 【tab1.page.ts】初始化默认添加数据方便上面html绑定展示;
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {
public list:string[] = [];
constructor() {}
ngOnInit(){
for (let index = 0; index < 3; index++) {
this.list.push(`我是第${index +1}条数据`);
}
}
favorite(){
console.log("分享");
}
unread(){
console.log("修改或删除");
}
}
- 【list-item-divider】
<h3> list-item-divider</h3>
<ion-list lines="full">
<ion-item-divider>
<ion-label>A组团</ion-label>
</ion-item-divider>
<ion-item>
<ion-icon slot="start" name="add" color="primary" ></ion-icon>
<ion-label>新增成员</ion-label>
</ion-item>
<ion-item-divider>
<ion-label>B组团</ion-label>
</ion-item-divider>
<ion-item>
<ion-icon slot="end" name="alarm-outline" color="danger" ></ion-icon>
<ion-label>时钟</ion-label>
</ion-item>
<ion-item>
<ion-icon slot="end" name="calendar-outline" color="warning" ></ion-icon>
<ion-label>日程</ion-label>
</ion-item>
</ion-list>
- 【list-item-avatar】
<h3> list-item-avatar</h3>
<ion-list lines="full">
<ion-item>
<ion-avatar slot="start">
<img src="assets/icon/favicon.png" />
</ion-avatar>
<ion-label>图标前置</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="end">
<img src="assets/icon/favicon.png" />
</ion-avatar>
<ion-label>图标后置</ion-label>
</ion-item>
</ion-list>
- 【list-item-thumbnail】
<h3> list-item-thumbnail</h3>
<ion-list lines="full">
<ion-item>
<ion-thumbnail slot="end">
<ion-img src="assets/logo/angular-404_wps.png"></ion-img>
</ion-thumbnail>
<ion-label>图标后置, 新闻展示</ion-label>
</ion-item>
</ion-list>
- 【list-item-sliding】
<h3> list-item-sliding</h3>
<ion-list lines="full">
<ion-item-sliding>
<ion-item>
<ion-label>左右滑动,显示对应的=》操作</ion-label>
</ion-item>
<ion-item-options side="start">
<ion-item-option color="primary" (click)="favorite(item)">分享</ion-item-option>
</ion-item-options>
<ion-item-options side="end">
<ion-item-option color="primary" (click)="unread(item)">修改</ion-item-option>
<ion-item-option color="warning" (click)="unread(item)">删除</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
运行预览: