實現(xiàn)效果：

代碼示例：

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)
    }
  }
}

調(diào)用頁面

import RollingText from '../components/RollingText'

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

審核編輯 黃宇