离子滑动手势不适用于 phone

Question

我尝试做一个滑动手势来在选项卡之间切换。我希望该手势适用于整个屏幕。我在

中捕捉到滑动动作

<ion-content (swipe)="swipeEvent($event)">

swipeEvent 函数是

swipeEvent(e) {
  if(e.direction == '2'){
     this.navCtrl.parent.select(2);
  }
  else if(e.direction == '4'){
     this.navCtrl.parent.select(0);
  }
}

在浏览器中运行良好。但是当我在 phone 中构建它时，手势无效。有没有其他解决方案？

Answer 1

这是 Ionic 团队成员的解决方案：See this too。

It's not really recommended to use swipe gestures on the main content. Since ion-content is a input for gestures anyways (scrolling and such) it having swipe on it can just cause confusion. Instead, putting the event handler on a child element works fine.

<ion-content padding>
  <ion-card (swipe)="swipeEvent($event)">
    <ion-item>

    </ion-item>
  </ion-card>
</ion-content>

Answer 2

刚刚通过添加一个具有 100% 高度和宽度的 div 解决了这个问题。

<ion-content padding>
  <div (swipe)="swipeEvent($event)" style="position: absolute;top:0;left:0;height:100%;width:100%;">
    <ion-item>

    </ion-item>
  </div>
</ion-content>

Answer 3

在我的例子中，我在自定义组件上使用 (swipe) 并通过向组件样式添加 display:block 解决了问题。

离子滑动手势不适用于 phone

Ionic swipe gesture not working on phone

gesture

typescript

ionic-framework

ionic2

ionic3