iOS 上的离子滑动手势

Question

我们在 iOS 上的手势有一个非常具体的问题。 我们有可以左右滑动的卡片，正如 Tinder 所知道的那样，但也可以向上滚动卡片以获取有关当前卡片的更多信息。 我们将 Ionic 框架与 AngularJS 一起使用，并使用了一个使用hammer.js 的组件，如https://medium.com/better-programming/tinder-like-swiper-ui-for-angular-ionic-4-50c401d6b9fb 所述。 在 Android 上一切正常，但当卡片的内容向上滚动时，iOS 会停止滑动。

app.module.ts:

export class IonicGestureConfig extends HammerGestureConfig {
  public overrides = <any> {
    'pan': {
      enable: true,
      direction: Hammer.DIRECTION_HORIZONTAL
    }
  };
  buildHammer(element: HTMLElement) {
    const mc = new (<any>window).Hammer(element);

    for (const eventName in this.overrides) {
      if ( eventName && mc.get(eventName)) {
        mc.get(eventName).set(this.overrides[eventName]);
      }
    }

    return mc;
  }
}

火种-ui-component.ts：

handlePan( event: any ) {
    event.preventDefault(event);
    if ( event.deltaX === 0 || ( event.center.x === 0 && event.center.y === 0 ) || !this.cards.length ) return;
    if (this.transitionInProgress) this.handleShift();
    this.renderer.addClass( this.tinderCardsArray[0].nativeElement, 'moving' );
    // if ( event.deltaX > 0 ) { this.toggleChoiceIndicator( false, true ) }
    // if ( event.deltaX < 0 ) { this.toggleChoiceIndicator( true, false ) }

    let xMulti = event.deltaX * 0.03;
    let yMulti = event.deltaY / 80;
    let rotate = xMulti * yMulti;
    this.renderer.setStyle( this.tinderCardsArray[0].nativeElement, 'transform', 'translate(' + event.deltaX + 'px, ' + event.deltaY + 'px) rotate(' + rotate + 'deg)' );
    this.shiftRequired = true;
  };

  handlePanEnd( event: any ) {
    // this.toggleChoiceIndicator( false,false );

    if ( !this.cards.length ) return;

    this.renderer.removeClass( this.tinderCardsArray[0].nativeElement, 'moving' );

    let keep = Math.abs(event.deltaX) < 50 || Math.abs(event.velocityX) < 0.5;
    if ( keep ) {

      this.renderer.setStyle( this.tinderCardsArray[0].nativeElement, 'transform', '' );
      this.shiftRequired = false;

    } else {

      let endX = Math.max( Math.abs( event.velocityX ) * this.moveOutWidth, this.moveOutWidth );
      let toX = event.deltaX > 0 ? endX : -endX;
      let endY = Math.abs( event.velocityY ) * this.moveOutWidth;
      let toY = event.deltaY > 0 ? endY : -endY;
      let xMulti = event.deltaX * 0.03;
      let yMulti = event.deltaY / 80;
      let rotate = xMulti * yMulti;

      this.renderer.setStyle( this.tinderCardsArray[0].nativeElement, 'transform', 'translate(' + toX + 'px, ' + ( toY + event.deltaY ) + 'px) rotate(' + rotate + 'deg)' );

      this.shiftRequired = true;

      this.emitChoice( !!( event.deltaX > 0 ), this.cards[0], this.cards.length );
    }
    this.transitionInProgress = true;
  };