Question

我正在使用离子摆动（ionic 4 / Angular 7）（https://www.npmjs.com/package/ionic-swing）来制作类似Tinder的卡，但是在手机上进行测试时不起作用。它可以在网络浏览器上正常工作，但完全不响应手机上的滑动手势。

我以为这是Hammer.js的问题，但我测试了一个简单的情况，即在滑动手势（“ panleft panright”）上显示“ left”或“ right”，并且效果很好。

在Galaxy S8 +（Android 9 / One UI 1）和oppo F5（我不知道哪个版本的android）上进行了测试。

查看：

<div class="stack" swingStack #swingStack  [stackConfig]="stackConfig" (throwoutleft)="onThrowOut($event)" (throwoutright)="onThrowOut($event)" (throwout)="onThrowOut($event)">
  <ion-card swingCard #swingCards [ngClass]="c.name" *ngFor="let c of cards">{{ c.symbol }}</ion-card>

组件：

@ViewChild('swingStack', { read: SwingStackDirective }) swingStack: SwingStackDirective;
@ViewChildren('swingCards', { read: SwingCardDirective }) swingCards: QueryList<SwingCardDirective>;

cards: Array<any>;
stackConfig: StackConfig;

constructor() {

this.stackConfig = {
  allowedDirections: [Direction.UP, Direction.DOWN, Direction.LEFT, Direction.RIGHT],
  throwOutConfidence: (offsetX, offsetY, element) => {
    return Math.min(Math.max(Math.abs(offsetX) / (element.offsetWidth / 1.7), Math.abs(offsetY) / (element.offsetHeight / 2)), 1);
  },
  throwOutDistance: (d) => {
    return 800;
  }
}

this.cards = [
  { name: 'clubs', symbol: '♣' },
  { name: 'diamonds', symbol: '♦' },
  { name: 'spades', symbol: '♠' }
];
}

ngAfterViewInit() {
this.swingCards.forEach((c) => console.log(c.getCard()));
this.swingStack.throwoutleft.subscribe(
  (event: ThrowEvent) => console.log('Manual hook: ', event));
this.swingStack.dragstart.subscribe((event: DragEvent) => console.log(event));

this.swingStack.dragmove.subscribe((event: DragEvent) => console.log(event));
}

onThrowOut(event: ThrowEvent) {
console.log('Hook from the template', event.throwDirection);
}

ionic-swing库在移动设备上不起作用

0 个答案: