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

Question

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

页面转换后，点击或点击卡片在 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 毫秒非常平坦(如下图所示)。

这就是缓动也必须改变的原因。

Original: cubic-bezier(0.36,0.66,0.04,1) Changed to: cubic-bezier(0.36,0.66,0.9,1)

为了使应用程序在向后导航时更快，以及在 View 中按下后退按钮时必须添加相同的动画。这可以通过覆盖 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