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-300ms处非常平坦（在下图中可以看到），实际的视觉动画实际上看起来并不长。

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

原文：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

Ionic2 iOS过渡阻止点击或点击一秒钟

1 个答案: