Ionic 基本元素（ion-list）

最新推荐文章于 2024-07-29 06:31:09 发布

ChaITSimpleLove

最新推荐文章于 2024-07-29 06:31:09 发布

阅读量731

点赞数

分类专栏： Ionic for Angular 文章标签： ionic ion-list

本文链接：https://blog.csdn.net/ChaITSimpleLove/article/details/104888827

版权

Ionic for Angular 专栏收录该内容

4 篇文章

订阅专栏

本文深入解析Ionic框架中列表组件的多种使用方式，包括基本列表项、列表头、列表分隔符、带有头像和缩略图的列表项、可滑动操作的列表项等，通过实例展示了如何在Ionic应用中灵活运用这些列表组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【list-item】

<h3>&nbsp;&nbsp; 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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>

运行预览：