ionic 列表操作

Ionic 列表（ion-list）完整实战指南

（Ionic 7+，支持 Angular / React / Vue 都适用）

1. 基本列表结构（99% 场景都用这个）

<ion-list>
  <!-- 普通列表项 -->
  <ion-item>
    <ion-label>北京</ion-label>
  </ion-item>

  <!-- 带图标 -->
  <ion-item>
    <ion-icon name="home-outline" slot="start"></ion-icon>
    <ion-label>首页</ion-label>
  </ion-item>

  <!-- 带头像 + 多行文字 -->
  <ion-item>
    <ion-avatar slot="start">
      <img src="https://avatars.githubusercontent.com/u/123456" />
    </ion-avatar>
    <ion-label>
      <h2>张三</h2>
      <p>最后上线：2小时前</p>
    </ion-label>
    <ion-badge color="success" slot="end">在线</ion-badge>
  </ion-item>

  <!-- 可点击的列表项（推荐） -->
  <ion-item button (click)="goToDetail(item)">
    <ion-label>订单 #10086</ion-label>
    <ion-icon name="chevron-forward" slot="end"></ion-icon>
  </ion-item>
</ion-list>

2. 8 种最常用的列表样式（直接复制）

样式类型	代码示例	适用场景
带分割线（默认）	<ion-item lines="full"> 或 lines="inset"	普通列表
无分割线	<ion-item lines="none">	卡片式、紧凑布局
带缩略图	<ion-thumbnail slot="start">	联系人、商品列表
多行文字	<ion-label><h2>..</h2><p>..</p></ion-label>	消息、通知
右侧详情按钮	<ion-note slot="end">2025-11-19</ion-note>	订单、日志
带开关	<ion-toggle slot="end">	设置页面
带单选框	<ion-radio slot="end">	选择地址、支付方式
带复选框	<ion-checkbox slot="end">	批量删除、选择商品

3. 动态列表 + 点击 + 长按 + 侧滑删除（完整实战代码）

<!-- template -->
<ion-list>
  <ion-item-sliding *ngFor="let msg of messages; let i = index">

    <!-- 可滑动的列表项 -->
    <ion-item (click)="openMsg(msg)" (press)="longPress(msg)">
      <ion-avatar slot="start">
        <img [src]="msg.avatar" />
      </ion-avatar>
      <ion-label>
        <h2>{{ msg.name }}</h2>
        <p>{{ msg.preview }}</p>
      </ion-label>
      <ion-note slot="end">{{ msg.time }}</ion-note>
    </ion-item>

    <!-- 滑动露出的操作按钮 -->
    <ion-item-options side="end">
      <ion-item-option color="danger" (click)="delete(msg, i)">
        <ion-icon name="trash"></ion-icon> 删除
      </ion-item-option>
      <ion-item-option color="primary" (click)="markRead(msg)">
        <ion-icon name="checkmark"></ion-icon> 已读
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

// component.ts
messages = [
  { name: '张三', preview: '在吗？', time: '10:30', avatar: '...' },
  // ...
];

delete(msg: any, index: number) {
  this.messages.splice(index, 1);
  this.toast.create({ message: '已删除', duration: 1500 }).present();
}

markRead(msg: any) {
  msg.read = true;
  // 关闭滑动状态
  const sliding = document.querySelector('ion-item-sliding');
  sliding?.close();
}

4. 列表分组 + 标题（常用于设置、通讯录）

<ion-list>
  <ion-list-header>
    <ion-label>A</ion-label>
  </ion-list-header>
  <ion-item>安琪拉</ion-item>
  <ion-item>阿轲</ion-item>

  <ion-list-header>
    <ion-label>B</ion-label>
  </ion-list-header>
  <ion-item>白起</ion-item>
  <ion-item>扁鹊</ion-item>
</ion-list>

5. 可虚化的列表（上滑时自动虚化头部）

<ion-list inset>
  <!-- inset 属性会自动添加圆角 + 阴影 + 上滑虚化效果 -->
  <ion-item>项目1</ion-item>
  <ion-item>项目2</ion-item>
</ion-list>

6. 性能优化（大数据量必备）

<!-- 虚拟滚动（Virtual Scroll 已升级为 ion-virtual-scroll） -->
<ion-content>
  <ion-virtual-scroll [items]="bigData" [approxItemHeight]="60">
    <ion-item *virtualItem="let item">
      <ion-label>{{ item.name }}</ion-label>
    </ion-item>
  </ion-virtual-scroll>
</ion-content>

7. 常用属性速查表

属性	说明	示例
lines="full"	完整分割线	经典列表
lines="inset"	缩进分割线（iOS 风格）	设置页常用
lines="none"	无分割线	卡片式
button	让整个 item 可点击（加波纹效果）	必须加
detail	显示右侧小箭头	<ion-item detail>
inset	圆角 + 阴影 + 上滑虚化	新版推荐

8. 一句话总结最优雅写法

<ion-item button detail lines="inset" (click)="go(item)">
  <ion-label>
    <h3>标题</h3>
    <p>副标题</p>
  </ion-label>
  <ion-badge slot="end">99+</ion-badge>
</ion-item>

这样写出来的列表，在 iOS 和 Android 上都超级原生好看！

需要我直接发你一个「消息列表 + 侧滑删除 + 头像 + 未读红点」的完整可运行页面代码吗？一句话就发～