页面能设置从下向上弹出的效果吗 HarmonyOS 鸿蒙Next

页面能设置从下向上弹出的效果吗 HarmonyOS 鸿蒙Next 页面能设置从下向上的弹出效果吗 现在是从右向左

3 回复

通过在pageTransition函数中自定义页面入场和页面退场的转场动效

  • @Entry
  • @Component
  • struct Index {
  • build() {
    • Column() {
    • }
  • }
  • // 定义页面转场动画
  • pageTransition() {
    • //设置入场动效，页面从底部进入，动效持续时间1000毫秒
    • PageTransitionEnter({ duration: 1000 })
      • .slide(SlideEffect.BOTTOM)
    • //设置退场动效，页面从顶部消失，延迟1000毫秒
    • PageTransitionExit({ delay: 1000})
      • .slide(SlideEffect.TOP)
  • }

参见页面间转场 (pageTransition)

更多关于页面能设置从下向上弹出的效果吗 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


当前支持pageTransition设置页面间转场，其中SlideEffect可以设置Top或Bottom，进行上下动画

参考：

1）文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-page-transition-animation-0000001774281026#ZH-CN_TOPIC_0000001774281026__pagetransition

在HarmonyOS（鸿蒙Next）中，页面可以通过使用PageTransition来实现从下向上弹出的效果。具体可以使用PageTransitionEnter和PageTransitionExit来定义页面的进入和退出动画。通过设置slide属性，并指定SlideEffect.BOTTOM，可以实现页面从底部滑入的效果。示例代码如下：

@Entry
@Component
struct MyPage {
  build() {
    Column() {
      Text('Hello, HarmonyOS')
        .fontSize(30)
        .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
    .pageTransitionEnter(PageTransitionEnter.slide(SlideEffect.BOTTOM))
    .pageTransitionExit(PageTransitionExit.slide(SlideEffect.BOTTOM))
  }
}

该代码定义了页面从底部滑入和滑出的效果。

回到顶部