Ionic 离子5 - SwipeToClose不可能

kx7yvsdv  于 2022-12-08  发布在  Ionic
关注(0)|答案(2)|浏览(162)

My problem is quite simple : I try to implement a component in modal, but when I try to add SwipeToClose, it's not working (The modal stay static even if I try to swipe down) ...
I'm really confused, but I've create a Stackblitz to show you my issue in detail, maybe I miss something important ... : https://stackblitz.com/edit/ionic-angular-v5-u4wmun
My component :

import { Component, Injectable } from '@angular/core';
import { NavController, ModalController } from '@ionic/angular';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  myModal:any;

  constructor(
    public modalController: ModalController
  ) {
  }

  async presentModal() {
    this.myModal = await this.modalController.create({
      component: ModalComponent,
      swipeToClose: true,
      backdropDismiss: true
    });
    return await this.myModal.present();
  }

}

Thanks to your time !
PS : I try to use it in iOS only, I've already try on my iOS device and it's doesn't work too ...

d5vmydt9

d5vmydt91#

滑动关闭只适用于ios模式的模态(目前是离子v5)。因此,请指定模态模式为ios

this.myModal = await this.modalController.create({
  component: ModalComponent,
  swipeToClose: true,
  mode: 'ios',
  backdropDismiss: true
});
pjngdqdw

pjngdqdw2#

SwipeToClose手势仅适用于IOS模式,可应用于卡模式,下一版本将弃用如果您将以下方法应用于IonContent元素或正文中第一个元素,它将检测swipeDown手势,并在一定程度上解决该问题,适用于所有模式

constructor(public gestureCtrl: GestureController) { }

swipeDownToCloseModal = (elm: HTMLElement)=>{
  const swipeGesture: Gesture = this.gestureCtrl.create({
    el:elm,
    threshold:1,
    maxAngle:95,
    gestureName:'swipeGesture',
    onEnd:e=>{
      if(e.velocityY>0.15 && e.deltaY>100 && elm.getBoundingClientRect().y===0){
        this.modal.dismiss(); //change
      }
    }
  });
  swipeGesture.enable(true);
};

相关问题