引导页-倒计时-开发样例

import router from '@ohos.router'
@Preview
@Entry
@Component
struct Page12_GuidePage {
  @State message: string = 'Hello World'
  @State count:number = 3
  private timer:number = 0

  // 默认是 小屏 从 缓存读取判断当前是 手机 平板或者其他类型
  @State currentBreakpoint:string = 'sm'
  @State flag:number = 1.2

  aboutToAppear(){
     this.timer = setInterval(()=> {
        this.count--
        if(this.count <= 0 ){
          router.replaceUrl({
            url:'pages/Index'
          })
        }
    },1000)

    // 计算倍数
    switch (this.currentBreakpoint){
      case "sm":
        this.flag *= 1
        break;
      case "md":
        this.flag *= 1.1
        break;
      case "lg":
        this.flag *= 1.2
        break;
      case "xl":
        this.flag *= 1.8
        break;
    }

  }

  aboutToDisappear():void {
    clearInterval(this.timer)
  }

  build() {
    Stack(){
        Text(`倒计时:${this.count}`).fontSize(20).position({x:'72%',y:50})
        Flex({
          direction:FlexDirection.Column,
          alignItems:ItemAlign.Center
        }) {
          // logo
        Column(){
          Image($r('app.media.app_icon')).width(120 * this.flag).height(120 * this.flag).borderRadius(10)
        }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).flexGrow(1)


        // 图片
        Image($r('app.media.app_icon')).width(114  * this.flag).height(27  * this.flag)

        // 文字描述
        Text('超市').fontColor('#660000').fontSize(20).letterSpacing(16).margin({top:12,bottom:136})

        }.width('100%').height('100%')
    }

  }
}