ionic 滑动框

在 Ionic 中，“滑动框”通常指以下两种常见组件（2025 年最新版推荐用法）：

你想做的效果	推荐组件	说明
列表项左滑/右滑删除、标记	ion-item-sliding	最经典、最常用，性能极好
底部/顶部/侧边抽屉滑出面板	ion-modal（新版）	Ionic 7+ 推荐用 modal 实现底部滑动框

下面分别给你最全、最新的完整代码（支持 Angular / React / Vue）

1. 经典左右滑动（列表项左滑右滑操作）—— ion-item-sliding

Angular 示例（最常用）

<!-- page.html -->
<ion-list>
  <ion-item-sliding *ngFor="let item of items">
    <ion-item (click)="openDetail(item)">
      <ion-label>
        <h2>{{ item.title }}</h2>
        <p>{{ item.subtitle }}</p>
      </ion-label>
    </ion-item>

    <!-- 右滑出现的按钮（红色删除） -->
    <ion-item-options side="end">
      <ion-item-option color="danger" (click)="delete(item)">
        <ion-icon name="trash-outline"></ion-icon>
        删除
      </ion-item-option>
    </ion-item-options>

    <!-- 左滑出现的按钮（可多个） -->
    <ion-item-options side="start">
      <ion-item-option color="primary" (click)="markAsRead(item)">
        <ion-icon name="checkmark-circle-outline"></ion-icon>
        已读
      </ion-item-option>
      <ion-item-option color="tertiary" (click)="archive(item)">
        <ion-icon name="archive-outline"></ion-icon>
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

// page.ts
delete(item: any) {
  // 必须手动关闭滑动状态
  item.close();
  this.items = this.items.filter(i => i !== item);
}

async markAsRead(item: any) {
  await item.close();           // 关闭滑动
  // 你的业务逻辑
}

React 示例

{items.map((item) => (
  <IonItemSliding key={item.id}>
    <IonItem routerLink={`/detail/${item.id}`}>
      <IonLabel>
        <h2>{item.title}</h2>
        <p>{item.subtitle}</p>
      </IonLabel>
    </IonItem>

    <IonItemOptions side="end">
      <IonItemOption color="danger" onClick={() => del(item)}>
        <IonIcon icon={trash} /> 删除
      </IonItemOption>
    </IonItemOptions>

    <IonItemOptions side="start">
      <IonItemOption color="success" onClick={() => read(item)}>
        已读
      </IonItemOption>
    </IonItemOptions>
  </IonItemSliding>
))}

2. 底部滑动面板（Bottom Sheet）—— 2025 年最推荐方式

Ionic 7+ 已经把 ion-modal + isOpen + breakpoints 作为官方底部滑动框方案，彻底取代旧的 ion-bottom-sheet。

Angular（最丝滑）

<!-- page.html -->
<ion-button (click)="presentBottomSheet()">打开底部滑动框</ion-button>

<ion-modal #bottomModal 
           [isOpen]="isModalOpen"
           [breakpoints]="[0, 0.3, 0.5, 0.8, 1]"
           [initialBreakpoint]="0.5"
           [handleBehavior]="'cycle'"   <!-- 可拖动切换高度 -->
           (ionModalDidDismiss)="isModalOpen = false">
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-title>设置</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="bottomModal.dismiss()">关闭</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      <ion-list>
        <ion-item><ion-label>夜间模式</ion-label><ion-toggle></ion-toggle></ion-item>
        <ion-item><ion-label>消息通知</ion-label><ion-toggle></ion-toggle></ion-item>
        <!-- 内容可以非常长，会自动滚动 -->
      </ion-list>
    </ion-content>
  </ng-template>
</ion-modal>

// page.ts
@ViewChild('bottomModal') modal!: IonModal;

isModalOpen = false;

presentBottomSheet() {
  this.isModalOpen = true;
}

React（同样丝滑）

const [isOpen, setIsOpen] = useState(false);

<IonModal 
  isOpen={isOpen}
  breakpoints={[0, 0.4, 0.7, 1]}
  initialBreakpoint={0.4}
  onDidDismiss={() => setIsOpen(false)}
>
  <IonHeader>
    <IonToolbar>
      <IonTitle>更多操作</IonTitle>
      <IonButtons slot="end">
        <IonButton onClick={() => setIsOpen(false)}>关闭</IonButton>
      </IonButtons>
    </IonToolbar>
  </IonHeader>
  <IonContent className="ion-padding">
    {/* 你的内容 */}
  </IonContent>
</IonModal>

<IonButton onClick={() => setIsOpen(true)}>打开底部面板</IonButton>

Vue 3

<ion-modal :is-open="isOpen"
           :breakpoints="[0, 0.35, 0.6, 0.9]"
           initial-breakpoint="0.35"
           @ionModalDidDismiss="isOpen = false">
  <!-- 内容同上 -->
</ion-modal>

3. 2025 年最常用的 breakpoints 配置

// 常见高度组合
[0, 0.25, 0.5, 0.85]     → 小、中、大
[0, 0.4, 0.7, 1]         → 微信/抖音式底部菜单
[0, 0.6, 0.9]            → 带搜索框的地址选择

4. 全局美化（global.scss 推荐）

/* 底部滑动框圆角 + 手柄 */
ion-modal.bottom-sheet {
  --border-radius: 20px 20px 0 0;
  --box-shadow: 0 -2px 20px rgba(0,0,0,0.15);
  --height: 90%;              // 配合 breakpoints 使用
}

/* 手柄小条条（好看又实用） */
ion-modal::part(handle) {
  background: #c0c0c0;
  height: 4px;
  width: 36px;
  border-radius: 2px;
  margin: 12px auto;
}

只要把上面代码丢进项目，滑动框立刻变好看！

需要哪种滑动效果（聊天左滑回复、微信右上角菜单、地图底部详情、评论区滑动面板…），直接告诉我，我给你现成的完整模板！