在HarmonyOS鸿蒙Next开发中，push到另一个页面如何实现由下向上弹出的方式？

在HarmonyOS鸿蒙Next开发中，push到另一个页面如何实现由下向上弹出的方式？ 在HarmonyOS开发中，push到另一个页面如何实现由下向上弹出的方式？

4 回复

你好，可以参考这个demo：https://gitee.com/scenario-samples/global-popup

场景四：从下往上的抽屉式弹出

更多关于在HarmonyOS鸿蒙Next开发中，push到另一个页面如何实现由下向上弹出的方式？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


要让页面 push 跳转时由下向上弹出，可在 resources/base/animation 创建动画资源文件定义从 translateY(100%) 到 translateY(0) 的关键帧动画，定义 slideUpAnimation，设置好时长和缓动函数，然后在源页面跳转逻辑中，使用 router.push 方法，在 animation 参数里引入该动画，将其作为 enter 动画应用于目标页面跳转，从而实现由下向上弹出效果。

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-promptaction-0000001821000749

在HarmonyOS鸿蒙Next开发中，实现页面由下向上弹出的方式可以通过使用PageTransition和PageTransitionController来完成。首先，在PageTransition中定义页面的进入和退出动画。对于由下向上弹出的效果，可以使用SlideTransition，并设置SlideDirection.BOTTOM作为进入方向。接着，在PageTransitionController中控制页面的过渡动画，确保页面在进入时从底部滑入。最后，在页面跳转时，使用router.push方法，并传入配置好的PageTransitionController，即可实现页面由下向上弹出的效果。

在HarmonyOS鸿蒙Next开发中，实现页面由下向上弹出的方式，可以使用PageTransitionEnter和PageTransitionExit动画。具体步骤如下：

  1. 定义动画：在resources/base/animation目录下创建动画资源文件，定义从下向上滑入的动画效果。

  2. 应用动画：在页面跳转时，通过router.push方法，并在options中指定transition参数，使用自定义的动画资源。

  3. 页面返回：同样定义从上向下滑出的动画，并在返回时应用。

通过这种方式，可以实现页面跳转时由下向上弹出的视觉效果。

回到顶部