ionic 列表

Ionic 7+（2025 年最新）最全、最实用的 ion-list + ion-item 列表大全，直接复制粘贴就能用，涵盖你项目里 99% 的列表场景！

一、基础列表（最常用 5 种写法）

<ion-list>
  <!-- 1. 最简单纯文字列表 -->
  <ion-item>
    <ion-label>北京</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>上海</ion-label>
  </ion-item>

  <!-- 2. 带标题 + 副标题 -->
  <ion-item>
    <ion-label>
      <h2>张三</h2>
      <p>前端工程师 · 北京</p>
    </ion-label>
  </ion-item>

  <!-- 3. 带左侧头像 -->
  <ion-item>
    <ion-avatar slot="start">
      <img src="https://picsum.photos/80/80?random=1">
    </ion-avatar>
    <ion-label>
      <h2>李四</h2>
      <p>在上海 · 2 分钟前更新</p>
    </ion-label>
  </ion-item>

  <!-- 4. 右侧箭头（跳转详情最常用） -->
  <ion-item detail>
    <ion-label>订单列表</ion-label>
  </ion-item>

  <!-- 5. 右侧文字/开关/按钮 -->
  <ion-item>
    <ion-label>消息提醒</ion-label>
    <ion-toggle slot="end" [(ngModel)]="notify"></ion-toggle>
  </ion-item>
</ion-list>

二、2025 年最常用 10 种真实业务场景（直接复制）

场景	完整代码（复制即用）
1. 个人中心菜单列表	“`html
我的资料
我的订单

| 2. 聊天消息列表             | ```html
<ion-item *ngFor="let msg of messages">
  <ion-avatar slot="start">
    <img [src]="msg.avatar">
  </ion-avatar>
  <ion-label>
    <h2>{{msg.name}}</h2>
    <p>{{msg.text}}</p>
  </ion-label>
  <ion-note slot="end">{{msg.time}}</ion-note>
</ion-item>

|
| 3. 带缩略图的商品列表 | “`html

iPhone 16 Pro

￥8999限时优惠 加入购物车

| 4. 可左右滑动操作（删除/置顶） | ```html
<ion-item-sliding *ngFor="let item of items">
  <ion-item>
    <ion-label>{{item.title}}</ion-label>
  </ion-item>
  <ion-item-options side="end">
    <ion-item-option color="danger" (click)="delete(item)">
      <ion-icon name="trash"></ion-icon> 删除
    </ion-item-option>
    <ion-item-option color="warning" (click)="top(item)">
      <ion-icon name="arrow-up"></ion-icon> 置顶
    </ion-item-option>
  </ion-item-options>
</ion-list>

|
| 5. 分组列表（带标题分组） | “`html

热门城市
上海
北京

其他城市
杭州

| 6. 可多选列表（购物车/邮件） | ```html
<ion-list>
  <ion-item *ngFor="let item of carts">
    <ion-checkbox slot="start" [(ngModel)]="item.selected"></ion-checkbox>
    <ion-label>{{item.name}} ×{{item.num}}</ion-label>
    <ion-badge slot="end" color="danger">￥{{item.price}}</ion-badge>
  </ion-item>
</ion-list>

|

三、高级技巧（2025 必备）

<!-- 1. 无边距、无内边距（更紧凑） -->
<ion-list inset lines="none">
  <ion-item *ngFor="let i of [1,2,3]">
    <ion-label>紧凑列表 {{i}}</ion-label>
  </ion-item>
</ion-list>

<!-- 2. 圆角卡片式列表（2025 最流行） -->
<ion-list class="card-list">
  <ion-item lines="none">
    <ion-label class="ion-text-wrap">
      <h2>卡片标题</h2>
      <p>这里是详细内容...</p>
    </ion-label>
  </ion-item>
</ion-list>

全局 CSS（放 global.scss）：

.card-list {
  background: var(--ion-background-color);
  border-radius: 16px;
  overflow: hidden;
  margin: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

想要我直接发你一个「2025 最美列表组件库页面」吗？包含：

• 20+ 种常见列表样式
• 暗黑模式自动适配
• 左右滑动删除
• 多选、单选
• 分组、可折叠
• 虚拟滚动长列表（支持 10 万条不卡）

直接放进项目就能用，说一声就发 GitHub 链接！或者告诉我你现在想做什么列表（订单、聊天、商品、设置页…），我 10 秒给你写好完整代码～