Ionic2 iOS 转换阻止点击或单击一秒钟

Question

我对 iOS 上的 Ionic2 Final 点击行为有疑问。

页面转换后，点击或点击卡片会在 1-2 秒内不起作用，因此用户必须点击或点击两次（或稍等片刻再点击）。我已经尝试在卡片内使用<a>，而不是直接将点击附加到卡片上。我还尝试了(click), (tap), [navpush]，并尝试将tappable 添加到卡中。

<ion-content padding class="modules card-background-page">
  <ion-card  class="module-card" *ngFor="let module of modules">
  <a (tap)="tapEvent($event)" (click)="clickEvent($event)" [navPush]="modulePage" [navParams]="{id: module.id}" >
    <img src="{{module.thumbnail}}"/>
    <div class="card-content">
      <div class="card-title">
          <strong>Module {{module.number}}</strong>
      </div>
      <div class="card-subtitle">
          <strong *ngIf="translate.currentLang!='fr'">{{module.subtitle_en}}</strong>
          <strong *ngIf="translate.currentLang=='fr'">{{module.subtitle_fr}}</strong>
      </div>
    </div>
  </a>
  </ion-card>
</ion-content>

在 Android 上运行良好。

经过大量试验和错误后，我通过使用 android 转换“修复”了这个问题：

    IonicModule.forRoot(MyApp, {
      pageTransition: 'md-transition'
    }),

所以问题似乎出在 iOS 转换上。知道如何真正解决这个问题吗？有人有同样的问题吗？我也有在转换后很短的时间内返回小费或关闭侧面菜单的问题。不过这些都不是那么容易复制的。

iPhone 6S 上的 iOS 10.1.1

Answer 1

问题似乎是用于过渡的实际动画。您可以通过在按下 navCtrl 时调整动画的时间（和缓动）来解决此问题。您可以通过提供一个可选选项对象作为最后一个参数来做到这一点。

this.navCtrl.push('MyPage', null, {
  duration: 200,
  easing: 'cubic-bezier(0.36,0.66,0.9,1)'
});

解释如下...

原始动画设置为 500 毫秒，太长了。然而，实际的视觉动画实际上看起来并不需要那么长时间，因为原始动画的三次贝塞尔曲线在最后 200-300 毫秒非常平坦（如下图所示）。

这就是为什么也必须改变宽松的原因。

原：cubic-bezier(0.36,0.66,0.04,1) 改为： 三次贝塞尔曲线(0.36,0.66,0.9,1)

为了使应用程序在导航返回时快速以及在视图中按下返回按钮时必须添加相同的动画。这可以通过覆盖 NavBar 的后退按钮行为来完成。

所以把它添加到你的页面组件中

@ViewChild(Navbar) navBar: Navbar;

ionViewDidLoad() {
  this.setBackButtonAction()
}

//Method that overrides the default back button action
setBackButtonAction() {
  this.navBar.backButtonClick = () => {
    this.navCtrl.pop({
      duration: 200,
      easing: 'cubic-bezier(0.36,0.66,0.9,1)'
    });
  }
}

适用于任何构建源代码（或希望向 Ionic 团队提供拉取请求）的人。原始值在 ios-transition.ts 中设置，应该在那里更改

const DURATION = 500;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';

编辑：我已经向 Ionic 团队https://github.com/ionic-team/ionic/pull/13029提交了一个拉取请求