HarmonyOS 页面倒计时怎么实现

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

EntryAbility.ets中的在onWindowStageCreate()回调中通过loadContent()方法设置应用要加载的页面

参考案例:

https://gitee.com/harmonyos/codelabs/tree/master/Healthy_life

onWindowStageCreate(windowStage: window.WindowStage) {
  // Main window is created, set main page for this ability
  GlobalContext.getContext().setObject('isForeground', true);
  /**
   * 在onWindowStageCreate()回调中通过loadContent()方法设置应用要加载的页面
   */
  windowStage.loadContent('pages/AdvertisingPage', (err, data) => { //启动页
    if (err.code) {
      Logger.error('windowStage', 'Failed to load the content. Cause:' + JSON.stringify(err));
      return;
    }
    Logger.info('windowStage', 'Succeeded in loading the content. Data: ' + JSON.stringify(data));
  });
}
//AdvertisingPage.ets


import router from '@ohos.router';
import { CommonConstants as Const } from '../common/constants/CommonConstants';

@Entry
@Component
struct AdvertisingPage {
  @State duration: number = Const.AD_DURATION;
  private intervalId: number = -1;

  goToHomePage() {
    clearInterval(this.intervalId);
    router.replaceUrl({ url: 'pages/MainPage' });
  }

  aboutToAppear() {
    // 定时器设置5秒时间,5秒结束后跳转home页或者点击取消按钮直接进入home页
    this.intervalId = setInterval(() => {
      if (this.duration > 0) {
        this.duration -= 1;
      } else {
        this.goToHomePage();
      }
    }, Const.DURATION_1000)
  }

  build() {
    Column() {
      Row() {
        Text($r('app.string.jump_ad', this.duration))
          .fontSize($r('app.float.default_12'))
          .fontColor($r('app.color.white'))
          .borderRadius($r('app.float.default_16'))
          .letterSpacing(Const.LETTER_1)
          .height($r('app.float.default_36'))
          .backgroundColor('rgba(0,0,0,0.20)')
          .border({ color: $r('app.color.white'), width: $r('app.float.default_1') })
          .margin({ top: $r('app.float.default_36') })
          .padding($r('app.float.default_8'))
          .onClick(() => this.goToHomePage())
      }
      .width('90%')
      .justifyContent(FlexAlign.End)

      Row() {
        Image($r('app.media.logo'))
          .width($r('app.float.default_56'))
          .height($r('app.float.default_56'))
          .objectFit(ImageFit.Contain)
        Column({ space: Const.SPACE_4 }) {
          Text($r('app.string.EntryAbility_label'))
            .fontFamily($r('app.string.HarmonyHeiTi_Bold'))
            .fontSize($r('app.float.default_26'))
            .fontColor($r('app.color.titleColor'))
            .fontWeight(Const.FONT_WEIGHT_700)
            .letterSpacing(Const.LETTER_1)
          Text($r('app.string.EntryAbility_desc'))
            .fontFamily($r('app.string.HarmonyHeiTi'))
            .fontColor($r('app.color.titleColor'))
            .fontWeight(Const.FONT_WEIGHT_400)
            .letterSpacing(Const.LETTER_34)
            .opacity(Const.OPACITY_4)
            .fontSize($r('app.float.default_16'))
        }
        .alignItems(HorizontalAlign.Start)
        .margin({ left: $r('app.float.default_12') })
      }
      .height($r('app.float.default_100'))
      .width('100%')
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundImagePosition({x: 0, y: 0})
    .backgroundImage($r('app.media.ic_ad_bg'))
    .backgroundImageSize({ width: '100%', height: '100%' })
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS 实现倒计时功能
245浏览 • 1回复 待解决
HarmonyOS 倒计时天数
506浏览 • 1回复 待解决
HarmonyOS TextTimer倒计时问题
177浏览 • 1回复 待解决
HarmonyOS 倒计时方法
297浏览 • 1回复 待解决
HarmonyOS 请问ArkTS如何实现倒计时功能?
32897浏览 • 8回复 待解决
如何实现文本类型的倒计时
1132浏览 • 0回复 待解决
HarmonyOS 如何自动倒计时组件
590浏览 • 1回复 待解决
HarmonyOS 60秒倒计时demo
353浏览 • 1回复 待解决
如何实现一个倒计时器?
699浏览 • 1回复 待解决
HarmonyOS Timer倒计时自定义
671浏览 • 1回复 待解决
HarmonyOS TextTimer60秒倒计时显示成00
225浏览 • 1回复 待解决