如何在Ionic V6中实现ion-modal-sheet滑动到底时固定头部（仿Uber Eats）

完全可以实现这种效果，核心思路是通过监听模态弹窗的状态变化，结合自定义CSS控制头部固定状态，以下是具体实现方案：

1. 配置模态弹窗为Sheet样式 #

先确保模态弹窗以sheet形式展示，创建modal时指定presentationStyle: 'sheet'：

import { ModalController } from '@ionic/angular';
import { YourModalComponent } from './your-modal.component';

// 在父组件中打开弹窗
async openSheetModal() {
  const modal = await this.modalCtrl.create({
    component: YourModalComponent,
    presentationStyle: 'sheet',
    swipeToClose: true,
    backdropDismiss: true
  });
  await modal.present();
}

2. 拆分Modal内部结构 #

在弹窗组件模板中，分离可吸附头部和滚动内容区：

<ion-content class="modal-sheet-content">
  <!-- 可固定的头部 -->
  <div class="modal-header" [class.fixed]="isHeaderFixed">
    <ion-title>订单详情</ion-title>
    <ion-button fill="clear" (click)="closeModal()">×</ion-button>
  </div>

  <!-- 滚动内容区域 -->
  <div class="scroll-content">
    <!-- 业务内容示例 -->
    <div *ngFor="let item of items" class="list-item">
      {{ item.name }}
    </div>
  </div>
</ion-content>

3. 监听Modal状态切换头部固定 #

利用Ionic Modal的状态变化事件，判断弹窗是否完全展开（滑到底），切换头部固定状态：

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-your-modal',
  templateUrl: './your-modal.component.html',
  styleUrls: ['./your-modal.component.scss']
})
export class YourModalComponent {
  isHeaderFixed = false;
  items = Array(20).fill({ name: '示例菜品' }); // 模拟长列表

  constructor(private modalCtrl: ModalController) {}

  async ngAfterViewInit() {
    const modal = await this.modalCtrl.getTop();
    if (!modal) return;

    // 初始状态判断
    this.isHeaderFixed = modal.getState() === 'full';

    // 监听弹窗状态变化
    modal.addEventListener('ionModalWillChangeState', (event: CustomEvent) => {
      this.isHeaderFixed = event.detail.state === 'full';
    });
  }

  async closeModal() {
    await this.modalCtrl.dismiss();
  }
}

4. 添加CSS实现视觉效果 #

在组件SCSS文件中定义固定样式，同时避免内容被遮挡：

.modal-sheet-content {
  --background: #fff;
  padding: 0;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  transition: all 0.2s ease;

  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
}

.scroll-content {
  padding: 16px 20px;
  // 头部固定时添加上边距，避免内容被遮挡
  padding-top: 60px;

  .list-item {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
  }
}

补充说明 #

• 若弹窗内容为长列表，也可通过监听ionScroll事件判断滚动到底部触发固定，但监听Modal状态变化更贴合Sheet弹窗的交互逻辑；
• 可根据实际需求调整头部高度、边距等样式，保证视觉一致性。

内容的提问来源于stack exchange，提问作者Guillaume G.