鸿蒙OS应用示例：【数字滚动计时】

实现效果：

代码示例：

RollingText.ets 组件封装

/**
 * 滚动文字特效
 */
@Component
export default struct RollingText {

  private num:number
  private timerId: number = -1
  @State counter: number = 0

  aboutToAppear() {
    this.timerId = setInterval(() => {
      this.counter += 1
      if(this.counter==this.num){
        clearTimeout(this.timerId)
      }
    }, 1)//2000
  }

  aboutToDisappear() {
    clearTimeout(this.timerId)
  }

  build(){
    Row(){
      Text(""+this.counter).fontWeight(700).fontColor('#ffffff').fontSize(14)
    }
  }
}

调用页面

import RollingText from '../components/RollingText'

Column(){
  Text("控股公司(家)").fontWeight(700).fontColor('#ffffff').fontSize(16)
  RollingText({num:1100})
}.margin({left:10})