ArkTs9验证码倒计时demo

一、简易验证码倒计时,需要调整一下样式,主题逻辑是:

        1、通过countdownDisplay判断显示内容,false问显示文字,true为显示数字,默认为false

        2、点击文字 countdownDisplay 置为true,并且调用this.setShowTime();获取倒计时,second这个字段控制倒计时显示

        3、setShowTime控制倒计时的执行结束

// 展示显示文字,还是倒计时
@State countdownDisplay: boolean = false

// 倒计时
@State second: number = 59

// setInterval的执行ID,停止的时候需要用到
@State intervalID: number = 0

// 代码正文
  build() {
    Column() {
      Column({ space: 10 }) {       
        this.MobilePhone()
        Divider()
        this.CodeLine()
        Divider()
      
      }
      .width(CommonConstants.FULL_PERCENT)
      .padding($r('app.float.vp_twelve'))

    }
    .width(CommonConstants.FULL_PERCENT)
    .borderRadius({ topLeft: 25, topRight: 25 })
    .backgroundColor(Color.White)
  }

  @Builder MobilePhone() {
    Row() {
      this.Login_Image($r('app.

你可能感兴趣的:(前端,ArkTs,鸿蒙原生开发)