HarmonyOS鸿蒙Next ArkTS语言实现倒计时自动跳转页面

HarmonyOS鸿蒙Next ArkTS语言实现倒计时自动跳转页面 如果实现延迟操作，比如打开app在闪屏页面停留2s自动执行页面跳转到首页（不需要倒计时显示效果）

3 回复

参考demo

this.thimeOutId = setTimeout() => {
 router.replaceUrl({
 url: 'pages/LoginPage'
 })
 .catch((err:Error)=>{
 console.log(err.message,error.name)
 })
},2000;

需要在生命周期里面添加，页面自定义生命周期参考文档：页面和自定义组件生命周期-自定义组件-UI范式基本语法-学习ArkTS语言-基础入门 - 华为HarmonyOS开发者

更多关于HarmonyOS鸿蒙Next ArkTS语言实现倒计时自动跳转页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中，使用ArkTS语言实现倒计时自动跳转页面可以通过以下步骤完成：

  1. 创建页面：首先，创建两个页面，分别为主页面和目标页面。

  2. 导入模块：在主页面的ArkTS文件中，导入必要的模块，如@ohos.router用于页面跳转，@ohos.timer用于倒计时。

  3. 定义倒计时逻辑：在主页面的onPageShow生命周期中，定义一个倒计时逻辑。使用setInterval或setTimeout函数来实现倒计时功能。

  4. 跳转页面：当倒计时结束时，调用router.push方法跳转到目标页面。

示例代码如下：

import router from '@ohos.router';
import timer from '@ohos.timer';

@Entry
@Component
struct MainPage {
  private count: number = 5;

  onPageShow() {
    const intervalId = setInterval(() => {
      if (this.count > 0) {
        this.count--;
      } else {
        clearInterval(intervalId);
        router.push({ url: 'pages/TargetPage' });
      }
    }, 1000);
  }

  build() {
    Column() {
      Text(`倒计时: ${this.count}`)
        .fontSize(30)
        .margin({ top: 100 });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

在这个示例中，MainPage是主页面，onPageShow生命周期函数中定义了倒计时逻辑。当倒计时为0时，使用router.push方法跳转到TargetPage页面。

  1. 目标页面：在TargetPage页面中，可以定义相应的UI和逻辑。

通过以上步骤，可以在HarmonyOS中使用ArkTS语言实现倒计时自动跳转页面的功能。

在HarmonyOS鸿蒙Next中，使用ArkTS语言实现倒计时自动跳转页面，可以通过以下步骤实现：

  1. 创建倒计时逻辑：使用setTimeout或setInterval设置倒计时。
  2. 页面跳转：倒计时结束后，使用router.push或router.replace进行页面跳转。

示例代码：

import router from '@ohos.router';

@Entry
@Component
struct CountdownPage {
  @State count: number = 5;

  startCountdown() {
    const timer = setInterval(() => {
      if (this.count > 0) {
        this.count--;
      } else {
        clearInterval(timer);
        router.push({ url: 'pages/TargetPage' });
      }
    }, 1000);
  }

  onPageShow() {
    this.startCountdown();
  }

  build() {
    Column() {
      Text(`倒计时: ${this.count}`)
        .fontSize(30)
    }
  }
}

解释：

  • setInterval每秒减少count，当count为0时，跳转到目标页面。
  • onPageShow生命周期函数确保页面显示时启动倒计时。
回到顶部