如何在Ionic 6中实现模态框（Modal）可拖拽功能？

方案一：自定义拖拽手势（适用于居中模态框） #

针对你自定义尺寸的居中模态框，可以通过Ionic的GestureController实现拖拽功能，步骤如下：

1. 修改模态框组件（MyModal）的代码
   导入所需依赖并添加拖拽逻辑：

   import { Component, ElementRef, ViewChild } from '@angular/core';
   import { GestureController, ModalController } from '@ionic/angular';
   
   @Component({
     selector: 'app-my-modal',
     templateUrl: './my-modal.component.html',
     styleUrls: ['./my-modal.component.scss'],
   })
   export class MyModalComponent {
     @ViewChild('modalWrapper') modalWrapper!: ElementRef;
     private startY = 0;
     private isDragging = false;
   
     constructor(
       private gestureCtrl: GestureController,
       private modalCtrl: ModalController
     ) {}
   
     ngAfterViewInit() {
       this.createDragGesture();
     }
   
     private createDragGesture() {
       const gesture = this.gestureCtrl.create({
         el: this.modalWrapper.nativeElement,
         gestureName: 'drag-modal',
         onStart: (ev) => {
           this.startY = ev.startY;
           this.isDragging = true;
         },
         onMove: (ev) => {
           if (!this.isDragging) return;
           const deltaY = ev.currentY - this.startY;
           // 仅允许向下拖拽（可根据需求修改方向）
           if (deltaY > 0) {
             this.modalWrapper.nativeElement.style.transform = `translateY(${deltaY}px)`;
             this.modalWrapper.nativeElement.style.opacity = 1 - (deltaY / 300);
           }
         },
         onEnd: (ev) => {
           this.isDragging = false;
           const deltaY = ev.currentY - this.startY;
           // 拖拽超过阈值则关闭模态框，否则回弹原位
           if (deltaY > 150) {
             this.modalCtrl.dismiss();
           } else {
             this.modalWrapper.nativeElement.style.transform = 'translateY(0)';
             this.modalWrapper.nativeElement.style.opacity = 1;
           }
         }
       });
       gesture.enable(true);
     }
   }
   

2. 修改模态框HTML模板
   给内容容器添加引用标识：

   <div #modalWrapper class="modal-content">
     <!-- 你的模态框内容 -->
     <h2>拖拽测试</h2>
     <p>向下拖拽可关闭模态框</p>
   </div>
   

3. 更新CSS样式
   调整模态框的交互样式：

   .large-modal .modal-wrapper {
     --height: 500px;
     --width: 500px;
     pointer-events: auto;
   }
   
   .modal-content {
     width: 100%;
     height: 100%;
     background: #fff;
     border-radius: 16px;
     padding: 20px;
     cursor: grab;
   }
   
   .modal-content:active {
     cursor: grabbing;
   }
   

方案二：使用Ionic自带的滑动关闭（适用于底部模态框） #

如果你的模态框是底部滑入类型，可直接启用swipeToClose配置：

openModal() {
  return this.modalController.create({
    component: MyModal,
    cssClass: 'large-modal',
    swipeToClose: true,
    // 可选：设置模态框展示位置为底部
    mode: 'ios',
    presentingElement: await this.modalController.getTop()
  });
}

内容的提问来源于stack exchange，提问作者Maui