HarmonyOS 鸿蒙Next router.back()调用返回后的页面怎么自动刷新，我用的组件Refresh()

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next router.back()调用返回后的页面怎么自动刷新，我用的组件Refresh()

router.back()调用返回后的页面怎么自动刷新，我用的组件Refresh()，通过router.back()进行传参，我用的某个大神给的代码，但是运行有问题，可能具体条件不同，

我用的是aboutToAppear（），大神给的是onPageShow(),我不知道到底该怎么选，重不重复，我也尝试把代码两个分开放或都放在aboutToAppear中，但都没得到想要的结果，没有自动刷新，且对onPageShow里面大神给的具体代码也没太搞懂，是怎么赋值的，一直在乱试。

代码具体代码如下：


更多关于HarmonyOS 鸿蒙Next router.back()调用返回后的页面怎么自动刷新，我用的组件Refresh()的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

举个最简单的例子，上级页面是前一个页面，你通过上级页面跳转到下级页面，然后从下级页面通过router.back（）返回上级页面，下级页面也可以通过左边侧滑返回上级页面，这时候会触发onBackPress方法，不过我看你文中的onBackPress方法不太对，这样写有问题，需要添加return true,表示页面自己处理返回逻辑,不加的话默认是false。参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-29-V5

demo代码如下:

// xxx.ets
import { router } from '@kit.ArkUI';
import { Logger } from '@ohos/utils';

@Entry
@Component
struct Test2 {
  @State isRefreshing: boolean = false
  @State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']

  onPageShow(): void {
    let params = router.getParams()
    if (params) {
      console.log('get value' + (params as Record<string, boolean>).refresh);
      // 修改refresh组件的 refreshing 状态 = 参数refresh
      this.isRefreshing = (params as Record<string, boolean>).refresh;
    }
  }

  build() {
    Column() {
      Button("上级页面，点击跳转下级页面")
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Test3',
            params: {}
          }).catch((err: Error) => {
            Logger.error(JSON.stringify(err));
          });
        })
      Refresh({ refreshing: $$this.isRefreshing }) {
        List() {
          ForEach(this.arr, (item: string) => {
            ListItem() {
              Text('' + item)
                .width('70%')
                .height(80)
                .fontSize(16)
                .margin(10)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF)
            }
          }, (item: string) => item)
        }
      }
      .onRefreshing(() => {
        setTimeout(() => {
          this.isRefreshing = false
        }, 2000)
        console.log('onRefreshing test')
      })
      .backgroundColor(0x89CFF0)
      .refreshOffset(64)
      .pullToRefresh(true)
    }
  }
}


import { router } from '@kit.ArkUI';

@Entry
@Component
struct Test3 {
  onBackPress() {
    let options: router.RouterOptions = { url: 'pages/Test2', params: { refresh: true } }
    router.back(options)
    return true;
  }

  build() {
    Column() {
      Button("下级页面,点击返回上级页面")
        .onClick(() => {
          let options: router.RouterOptions = { url: 'pages/Test2', params: { refresh: true } }
          router.back(options)
        })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next router.back()调用返回后的页面怎么自动刷新，我用的组件Refresh()的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


如果用到router.back传参来控制页面刷新，那肯定是在返回后的页面的onpageshow里获取参数，因为router.back返回前一个页面不会走aboutToAppear。

你可以打印一下看看有没有获取到参数，如果参数没问题那就要看看refresh组件部分有没有写错了

在HarmonyOS鸿蒙系统中，当你通过router.back()方法返回到前一个页面时，如果需要自动刷新该页面，可以通过以下方式实现：

  1. 利用页面生命周期：在页面的onPageReappeared生命周期方法中，触发刷新逻辑。这个方法在页面重新出现在前台时会被调用，适合处理返回后的刷新需求。

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct MyPage {
    @State refreshFlag: boolean = false;

    @OnReappear
    onPageReappeared() {
        this.refreshFlag = !this.refreshFlag; // 切换状态以触发刷新
    }

    build() {
        Row() {
            Refresh({ refreshing: this.refreshFlag, onRefresh: this.handleRefresh }) {
                // 你的组件内容
            }
        }.padding(20)
    }

    handleRefresh() {
        // 刷新逻辑处理
    }
}

  2. 使用全局状态管理：如果页面间的状态共享较复杂，可以考虑使用全局状态管理（如Context或Global Store）来通知页面进行刷新。

    以上方法利用页面的生命周期和状态管理，实现了返回后的页面自动刷新。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部