Question

我希望能够动态控制导航过渡方向。

在这篇文章中，我发现了如何执行android或ios默认转换。

https://forum.ionicframework.com/t/page-transition-direction-in-ionic-4/148518/5

    IonicModule.forRoot({
        rippleEffect: false,
        // TODO:
        // navAnimation: override here
    }),

有没有办法在过渡开始之前从组件内部设置过渡方向？

Answer 1

编辑：我目前未使用此解决方案，因为我遇到了一些小怪异的错误。也许这仍然可以帮助某人...

今天碰到了这个。我的用例是分页。例如，在iOS模式下，如果单击的新页面更高，我希望页面前进，否则，我希望页面返回。但是，在这两种情况下，我都想向前迈进。

该解决方案实际上非常简单。 Here are the docs代表NavController。这是我的一线客：

this.navController.navigateForward(`/blog/home/${page}`,
  { queryParamsHandling: 'merge', animationDirection: page > this.currentPage ? 'forward' : 'back' });

因此，基本上只使用NavController（仍可与Angular路由器配合使用）并提供animationDirection选项。

如果需要的话，使用navigateForward是正确的举动，因此无论它们朝哪个方向前进，它们都在历史上仍在前进，并且可以返回到先前的视图。也有navigateBack。

Answer 2

我已经解决了这个问题，并发表了一篇中篇文章

https://medium.com/@hanche2001/how-to-change-between-android-and-ios-page-transitions-dynamically-in-ionic-ec1256a692f5

TLDR

IonicModule.forRoots允许您使用navAnimation函数配置并强制执行预定义的过渡动画

navAnimation函数接收进入和离开页面以及所使用的ion-router出口的参考

您可以编写一个自定义函数，以检查ion-router-outlet或进入页面的任何DOM属性，并返回要使用的页面转换

Answer 3

我使用离子navController和选项nav.navigateForward，nav.navigateRoot和nav.navigateBack。这些钩入角形router刨机中执行必要的定向动画。

没有充分的文档说明，但这有一些很好的例子：https://www.freakyjolly.com/ionic-4-latest-angular-routing-in-ionic-4-application/#more-2025

ionic 4-动态更改导航过渡方向

3 个答案: